Vue3常见知识**MS【4】

一、vue2和vue3的区别

1、数据绑定原理不同

   vue2：数据绑定是利用ES5的一个API：Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。

   vue3：使用了ES6的Proxy API对数据代理。相比vue2.x，使用proxy的优势如下：

• defineProperty只能监听某个属性，不能对全对象监听；
• 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)；
• 可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2、是否支持碎片

        vue2：不支持碎片。

        vue3：支持碎片（Fragments），或者说它可以拥有多个根节点。

3、API类型不同

        vue2：使用选项式（选项型）api，选项型api在代码里分割了不同的属性：data，computed，methods等。

        vue3：使用组合式api，新的合成型api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。

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

        vue2：是把数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。

        vue3：就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：

• 从vue引入reactive；
• 使用reactive() 方法来声明数据为响应性数据；
• 使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。

5、生命周期钩子函数不同

vue2：生命周期：

• beforeCreate 组件创建之前
• ​created 组件创建之后
• ​beforeMount 组价挂载到页面之前执行
• ​mounted 组件挂载到页面之后执行
• ​beforeUpdate 组件更新之前
• ​updated 组件更新之后

vue3：生命周期：

• setup 开始创建组件前
• onBeforeMount 组价挂载到页面之前执行
• onMounted 组件挂载到页面之后执行
• onBeforeUpdate 组件更新之前

        onUpdated 组件更新之后而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外，其中vue3.x它还增加了onRenderTracked 和onRenderTriggered函数。

6、父子传参不同

        vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象。

        vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽不同

        vue2：中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

        vue3：中必须使用v-slot的形式；vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3中移除v-on.native修饰符；vue3中移除过滤器filter。

8、main.js文件不同

        vue2：中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。

        vue3：中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。

9、Vue3带来了什么

        更快的渲染速度：Vue3使用了Proxy代理对象，可以更快地跟踪数据变化，从而提高渲染速度。

        更小的体积：Vue3的体积比Vue2更小，同时也支持按需加载，减少了页面加载时间。

        更好的TypeScript支持：Vue3对TypeScript的支持更加完善，可以更好地进行类型检查和代码提示。

        更好的组件封装：Vue3引入了Composition API，可以更好地封装组件逻辑，使得组件更加可复用和易维护。

        更好的响应式系统：Vue3的响应式系统进行了重构，可以更好地处理嵌套对象和数组的变化，同时也提供了更多的API来处理响应式数据。

        总之，Vue3带来了更好的性能、更小的体积、更好的TypeScript支持、更好的组件封装和更好的响应式系统，使得开发者可以更加高效地开发Vue应用。

 二、vue2和vue3响应式原理(Object.defineProperty和Proxy的区别)

1、 vue2的响应式原理

• ​ vue2的响应式实现主要是利用了Object