前端面试总结之长沙三

代码题：实现发送验证码

要求：

• 点击按钮之前，显示发送
• 点击按钮之后，开始60秒倒计时
• 60秒倒计时结束，显示发送

我是这样写的：

<div id='app'>
        <button @click="btn" :disabled="flag">{{msg}}</button>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                msg: "发送",
                flag: false,
                num: 60
            }
        },
        methods: {
            btn() {
                let timer = setInterval(() => {
                    this.flag = true
                    this.msg = this.num--
                    if (this.msg == 0) {
                        clearInterval(timer)
                        this.msg = "发送"
                        this.flag = false
                    }
                }, 1000)
            }
        },
    })
    app.mount('#app')
</script>

浏览器缓存机制

参考 浏览器缓存机制详解_卖菜的小白的博客-优快云博客_浏览器缓存

补充浏览器缓存是自发的（如果有错请纠正）

虚拟DOM的原理

 虚拟DOM是通过js对象的结构来记录html标签节点，当组件数据更新渲染视图时，先diff算法计算变化前后js对象（也就是虚拟DOM树）结构的不同，得到最小差异，然后针对性的更新部分真是DOM节点，这样可以极大地提高视图渲染效率，节省内存消耗。

css隐藏元素的方法

 参考  CSS中隐藏页面元素的几种方式和区别_测试界的飘柔的博客-优快云博客_css隐藏元素的三种方法

什么是脱离文档流

 参考  脱离文档流和半脱离文档流（详解）_大前端工程师的博客-优快云博客_脱离文档流

以上仅为个人经验，如有错误请指正，希望对各位有帮助。