VUE3和VUE2的一些区别

vue2   vs   vue3

      vue2升级vue3之后变得更快，更轻，协作更方便。无论对于我们开发者的体验或者用户使用方面都是升级优化。

vue3和vue2的主要区别在于以下几点：

一：数据双向绑定原理不同 

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

        vue3 中使⽤了 ES6 的 Proxy   API 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。

        vue3提供的proxy API代理的优势在于：

                1、defineProperty只能监听某个属性，不能对全对象监听。

                2、可以省去for...in，闭包等内容来提升效率（直接绑定整个对象即可）。

                3、可以监听数组，不再单独的对数组做特异性处理。可以检测到数组内部数据的变化。

二：定义变量和方法不同 

        vue2：在data中定义变量，在methods中创建方法。

        vue3：使用一个新的setup方法。   

vue3提供的setup方法在组件初始化构造的时候触发，使用以下三个步骤建立反应性数据：

1、从vue引入reactive。

2、使用reactive方法来声明数据为响应性数据。

3、使用setup方法返回响应性数据，从而template可以获取这些响应式数据。

三：生命周期钩子函数不同 

vue2	vue3
beforeCreate 组件创建之前 created 组件创建之后 beforeMount 组件挂载到页面之前执行 mounted 组件挂载到页面之后执行 beforeUpdate 组件更新之前 updated 组件更新之后 beforeDestory 组件销毁之前 destoryed 组件销毁之后	setup 开始创建组件 onBeforeMount 组件挂载到页面之前执行 onMounted 组件挂载到页面之后执行 onBeforeUpdate 组件更新之前 onUpdated 组件更新之后 onBeforeUnmount 组件销毁之前 onUnmounted 组件销毁之后

   若组件被<keep-alive>包含，则多出下面两个钩子函数。

1. onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行 。
2. onDeactivated(): 比如从 A组件，切换到 B 组件，A 组件消失时执行。

四：指令和插槽的使用不同

vue2	vue3
不建议将v-for和v-if写在一起使用 允许直接使用slot	将v-if当作v-for大的一个判断语句，不会相互冲突 移除keyCode作为v-on的修饰符，不支持config.keyCodes 移除v-on.native修饰符 移除过滤器filter 不允许直接使用slot，正确格式为 v-slot

五：API类型不同 

vue2	vue3
选项型api（Options API） （在代码中分割不同属性：data，computed，methods等）	合成型api（Composition API） （使用方法进行分隔，显得更加简便整洁）

六：是否支持碎片 

vue2	vue3
否	是，即可以拥有多个根节点

 七：父子之间传参不同

vue2	vue3
父传子： 子组件通过prop接收	使用setup()中的第二个参数content对象中有emit，只需要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。
子传父： 子组件中通过$emit向父组件触发一个监听方法，传递一个参数

 八：main.js文件中部分设置不同  

vue2	vue3
使用prototype（原型）的形式进行操作， 引入的是构造函数	需要使用结构的形式进行操作，引入的是工厂函数； vue3中app组件中可以没用根标签

---

        总结：vue2和vue3比较还是有很多不一样的地方，这里也只是整理了主要区别。

                   欢迎一起讨论。