Vue2与Vue3的区别

多根节点

Vue2在模板中不支持多根节点，而Vue3支持多根节点

生命周期

在Vue3的生命周期钩子函数名称比Vue2的生命周期钩子函数名称上多+“on”，功能上是类似的。另外，就是Vue3在使用生命周期钩子的时候需要先引入。

虚拟DOM

Vue3相比Vue2，虚拟DOM上增加patchFlag字段

打包优化Webpack

Tree-shaking模块打包webpack,rollup等中的概念。主要作用是移除JavaScript上下文中为引用的代码,主要依赖于import和export语句，用来检测代码模块是否被导出，导入，且被JavaScript文件使用。

在Vue2中，全局API暴露在Vue实例上，即使未使用，也无法通过tree-shaking进行消除。

而在Vue3中针对全局和内部的API进行了重构，并考虑到tree-shaking的支持。因此，在Vue3中全局API现在只能作为ES模块构建的命名导出进行访问。 通过这一更改，只要模块绑定器支持tree-shaking的支持。则Vue3应用程序中未使用的api将从最终的捆绑包中消除，获得最佳文件大小。

从API上来说Vue2与Vue3的区别

Vue2使用的是选项式API(Options API)格式，这种格式会导致对相同数据进行操作使用的代码会被分割到各个属性内，是很不利于代码的阅读的

Vue3采用函数式编程(Composition API)方式，打破了this的限制，能够更好的复用性，真正体现实现功能的高内据低耦合，更利于代码的可扩展性和可维护性。

Vue3更友好的支持兼容TS。

响应式原理上看

Vue2:

Vue2响应式原理基础是： Object.defineProperty

Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。 在遇到一个对象的属性还是要给对象的情况下，需要递归监听，对性能影响比较大。

由于Vue会在初始化实例时对属性执行getter/setter转化，所有属性必须在data对象上存在才能让Vue将它转换为响应式。 对于已经创建的实例，Vue不允许动态添加根级别的响应式属性。但是，可以使用Vue.set(object, propertyName, value)或者vm.$set方法向嵌套对象添加响应式属性。 Object.defoneProperty,不具备监听数据的能力，需要重新定义数组的原型来达到响应式。

Vue3：

Vue3响应式原理基础是：Proxy 基于Proxy和Reflect,可以原生监听数组，可以监听对象属性的添加和删除或多层嵌套数据结构的相应 Proxy代理的是整个对象，而不是对象的某个特定属性，不需要我们通过遍历来逐个进行数据绑定不需要一次性遍历data的属性，可以显著提高性能

用Proxy和Object.defineProperty相对比有什么优点？

使用Proxy能劫持整个对象，后者需要深度遍历每个属性；后者对数据操作很不友好。

从diff算法来看

Vue2是全量Diff，具体来说就是数据发生变化，他就会新生成一个DOM树，它会根据DOM数进行比较，找到不同的节点然后更新。

Vue3是静态标记+非全量Diff，具体来说就是Vue3在创建虚拟DOM树的时候，会根据DOM中的内容会不会发生变化，添加一个静态标记。之后在于上次虚拟节点进行对比的时候，就只会对比这些有静态标记的节点。

Vue3使用最长递增子序列优化对比流程，可以最大程序的减少DOM的移动，达到最少的DOM操作。

Vue2和Vue3父传子的this有什么变化？

父组件给子组件传值：

Vue2需要用this，Vue3不需要。

获取props有不同？

获取props:

Vue2在Script可直接获取，而Vue3要在setup传递获取props

Vue2和Vue3路由写法也不同

-------------------------------------------------------------------

vue2和vue3会wen的知识

1.双向数据绑定原型不同之处有哪些？ vue2和vue3又有哪些不同之处？

2.是否支持多个DOM？(根节点)

3.API类型不同之处有哪些？

4.定义数据变量和方法不同

5.生命周期钩子函数不同有哪些？

6.父子传参不同又有哪些？

7.指令与插槽不同又有哪些？

8.Main.ja文件不同之处？