Vue面试

临在❀

已于 2023-09-14 13:53:54 修改

阅读量771

点赞数

分类专栏： Vue相关知识文章标签：前端

于 2023-09-04 12:54:03 首次发布

本文链接：https://blog.csdn.net/weixin_43850639/article/details/132666869

版权

Vue相关知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue面试

1.Vue2 与Vue3的区别？
2.Vue 3的Diff算法相比Vue 2有哪些具体的改进？
3.computed 和 watch

1.Vue2 与Vue3的区别？

Vue 2和Vue 3是Vue.js框架的不同版本，在面试中经常涉及到它们之间的区别。以下是Vue 2和Vue 3的主要区别：

性能提升：Vue 3在性能方面进行了优化。Vue 3引入了更高效的Diff算法，提高了渲染性能。
Bundle大小：Vue 3的代码体积更小。Vue 3采用了模块化的设计，可以按需引入所需功能，减少了不必要的文件体积。
Composition API：Vue 3引入了Composition API，这是一种新的API风格，可以更好地组织和重用组件逻辑。
TypeScript支持：Vue 3对TypeScript的支持更加完善。Vue 3的代码库使用了TypeScript进行重写，提供了更好的类型推断和类型检查，使得开发者在使用TypeScript时能够获得更好的开发体验。
响应式系统改进：Vue 3的响应式系统进行了改进，使用Proxy替代了Vue 2中的Object.defineProperty，提供了更好的性能和开发体验。
Teleport组件：Vue 3引入了Teleport组件，可以将组件的内容渲染到DOM树的任意位置，提供了更大的灵活性。
Fragment优化：Vue 3对Fragment进行了优化，减少了虚拟DOM层级，提高了性能。
其他改进：Vue 3还带来了许多其他改进和新功能，如全局API的变化、更好的TypeScript支持、更好的错误处理等。

这些是Vue 2和Vue 3之间的一些主要区别。了解这些区别有助于开发者选择合适的版本，并在面试中回答相关问题。

2.Vue 3的Diff算法相比Vue 2有哪些具体的改进？

Vue 3的Diff算法相比Vue 2进行了一些具体的改进，主要包括以下几个方面：

Patch flag：Vue 3引入了Patch flag的概念，用于标记组件在更新过程中的一些特殊情况，例如组件的props发生变化或只需要强制更新等。这样可以在Diff算法中更快速地定位需要更新的组件，减少了比较的工作量，提高了更新性能。
静态标记和提升：Vue 3在编译阶段对模板进行静态分析，标记出那些静态的内容，即在渲染过程中不会发生变化的部分。对于这部分静态内容，Vue 3将其提升为常量，避免了每次渲染都进行比较的开销，进一步提高了渲染性能。
Fragments优化：在Vue 2中，Fragments（片段）会引入额外的虚拟DOM层级，导致Diff算法需要进行更多的比较操作。而在Vue 3中，对Fragments进行了优化，可以直接将其内部的内容合并到父级中，减少了虚拟DOM层级，提高了Diff算法的效率。
动态属性的快速路径：Vue 3通过快速路径（Fast Path）优化了动态属性的处理。对于动态属性，Vue 3会使用更快速的路径进行处理，减少了比较的开销，提高了Diff算法的性能。

总的来说，Vue 3的Diff算法在细节上进行了一系列的优化，通过引入Patch flag、静态标记和提升、Fragments优化以及动态属性的快速路径等改进，进一步提升了Diff算法的效率和性能，使得Vue 3在渲染性能方面有显著的改进。

3.computed 和 watch

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个或多个数据（称它们为依赖数据）发生变化的时候，所有依赖这些数据的 “相关” 数据 “自动” 发生变化，也就是自动调用相关的函数去实现数据的变动。

（1）computed

1、支持缓存，只有依赖数据发生改变，才会重新进行计算；

2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化；

3、相当于监听多个数据，只要其中有一个数据改变，就出发重新计算，如果数据没改变就用缓存里面的

注意：就算data中没有直接声明要计算的变量，也可以直接在computed中写入，如下示例：

<p id="app">  {{fullName}}  </p>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

这个fullname不在data里面

（2）watch

1、不支持缓存，数据改变，直接会触发相应的操作；

2、支持异步操作；

3、watch是监听器，只可以监听某一个数据，然后执行相应的操作；

4、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (newVal,oldVal) {
                this.fullName = newVal + ' ' + this.lastName
                console.log(newVal+'========='+oldVal)//Fooaaaa=========Foo
            },
            lastName: function (newVal,oldVal) {
                this.fullName = this.firstName + ' ' + newVal
                console.log(newVal+'========='+oldVal)//Baraaaa=========Bar
            }
        }
    })