Vue | 关于vue面试题的二三事

最新推荐文章于 2024-10-03 21:06:52 发布

胖者是谁

最新推荐文章于 2024-10-03 21:06:52 发布

阅读量342

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_72383454/article/details/127105412

版权

vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

1.Vue响应式原理

2.v-model的响应式原理

3.methods和computed 实现的区别

4.watch和computed的区别

5.methods和computed的区别：

1.Vue响应式原理

通过数据劫持结合发布者-订阅者模式的方式来实现。

其中，比较关键的方法是Object.defineProperty()，通过这个方法来劫持各个属性的getter、setter，在数据发生变动时发布消息给订阅者，触发相应的监听回调来重新渲染视图。

2.v-model的响应式原理

核心原理：

一方面通过数据劫持来劫持每个属性，一旦监听到变化，通过相关的页面元素更新；

另一方面通过编译模板文件，为控件的v-model绑定@input事件，从而页面输入能实时更新相关data属性。

代码：

<body>
    <div id="root">
        <input type="text" v-bind:value="name" @input="change">
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'hahaha'
            },
            methods: {
                change(event){
                    this.name = event.target.value
                }
            },
        })
    </script>
</body>

3.methods和computed 实现的区别

methods:调用方式是{{xxx()}}【函数调用】
computed:调用方式是{{xxx}}【属性访问】，computed数据是响应式的，如果数据层的值变了，computed就会实时更新到视图层上。

主要区别：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。methods得到属性，里面函数都会在执行一遍。

4.watch和computed的区别

computed是依赖的值改变后重新计算结果更新DOM，会进行缓存。它不能执行异步任务。计算属性一般不会用来向服务器请求或执行异步任务，因为耗时可能会比较长，我们的计算属性要实时更新。
watch监听的是属性值，当定义的值发生变化时，执行相对应的函数。最主要的区别就是可以用监听属性来做异步任务。总之一句话，computed能实现的，watch都能实现，computed不能实现的，watch也能实现。

5.methods和computed的区别：

调用方式：methods用{{xxx()}}【函数调用】，computed用{{xxx}}【属性访问】
computed数据是响应式的，如果数据层的值变了，computed就会实时更新到视图层上
主要区别：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便；methods得到属性，里面函数都会再执行一遍。

6.什么是虚拟DOM？

虚拟DOM本质上就是一个普通的JS对象，用于描述视图的界面结构。在VUE中，每个组件都有一个render函数，每个render函数都会返回一个虚拟DOM树，这也就意味着每个组件都对应一棵虚拟DOM树。

7.为什么需要虚拟DOM？

在VUE中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。减少频繁操作DOM，提高效率。

因此，VUW在渲染时，使用虚拟DOM来替代真实DOM，主要为解决渲染效率的问题。

8.虚拟DOM是如何转换成真实DOM的？

在一个组件实例首次被渲染时，它首先生成虚拟DOM树，然后根据虚拟DOM树创建真实DOM，并把真实DOM挂载到页面中合适的位置，此时，每个虚拟DOM便会对应一个真实的DOM。

如果一个组件受响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建一个新的虚拟DOM树，用新树和旧树对比，通过diff算法对比，VUE会找到最小更新量，然后更新必要的虚拟DOM节点，最后，这些更新过的虚拟节点，会去修改它们对应的真实DOM。

这样一来，就保证了对真实DOM达到最小的改动。

9.过滤器与计算属性的区别：

计算属性：依赖于一个固定的VUE实例，要在某一个实例中使用，不接受额外参数，依赖于data属性中的变量，有缓存管理机制，可减少页面调用次数，被作为一个类属性调用。
过滤器：不依赖于实例。可以定义一个全局过滤器，在多个实例中使用；不要求是data中的变量，可以是临时变量，可接受额外参数；无缓存机制，调用次数，取决于页面中有所多少过滤器；只能读取操作，过滤器被作为一个特殊方法处理，过滤器被当作一个特殊的函数。