Vue 2 和 Vue 3的区别

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

Vue3 中使用ES6的Proxy API对数据代理。

Vue3 使用数据代理的优势有以下几点：1）definePropert 只能监听某个属性，不能对整个对象进行监听 2）可以省去for in，闭包等内容来提升效率（直接绑定整个对象即可）3）可以监听数组，不用再单独的对数组做特异性操作，Vue3可以检测到数组内部数据的变化

Vue2 不支持碎片。Vue3 支持碎片，就是说可以拥有多个根节点

Vue2 使用选项类型api,选项型api 在代码里分割了不同的属性：data,computed,method等。

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

Vue2是把数据放到了data 中，在 Vue2中 定义数据变量是data(){},创建的方法要在method:{}

Vue3 就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：1）从vue 引入 reactive；2）使用 reactive ()方法来声明数据为响应性数据；3） 使用setup()方法来返回我们的响应性数据，从而template 可以获取这些响应性数据。

Vue2 中的生命周期：beforeCreate 组件创建之前；created 组建创建之后；beforeMount 组件挂载到页面之前执行；Mounted 组件挂载到页面之后执行，beforeUpdate 组件更新之前；updated组件更新之后

Vue3 中的生命周期：setup 开始创建组件；onBeforeMount 组件挂载到页面之前执行；onMounted 组件挂载到页面之后执行；onBeforeUpdate 组件更新之前；onUpdated 组件更新之后；

而且 Vue3 生命周期在调用前需要先进行引入。除了这些钩子函数外，Vue3 还增加了 onRenderTracked 和onRenderTriggered 函数。

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

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

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

Vue3 中必须是使用v-slot的形式；vue 3中v-for 与v-if ，只会把当前v-if 当作v-for 的一个判断语句，不会相互冲突；

Vue3 中移除keyCode 作为v-on 的修饰符，当然也不支持config.keyCodes，取而代之的是使用键名来作为事件的修饰符来使用，于是Vue.config.keyCodes 也被弃用了-vue2我们在监听按键事件的时候，是可以通过在事件后面加上按键码来实现监听某一个按键的--mulingyuer.com/archives/831/# ；

Vue3 中移除v-on.native 修饰符-这个修饰符的作用是：如果想要在一个组件的根元素上直接监听一个原生事件，需要使用v-on的.native修饰符Vue3中移除掉之后，取而代之的是，在新增的emits 选项中定义当前组件真正触发的事件（即，组件事件）。此外，Vue 现在将所有未在组件 emits 选项中定义的事件作为原生事件添加到子组件的根元素中（除非子组件选项中设置了inheritAttrs:false）

Vue3 中移除过滤器filter，官方推荐，如果要使用过滤器可以使用 computed 计算属性和method 函数来代替。如果是使用了全局过滤器，官方也提供了一个属性来进行迁移修复，但是也只推荐用于迁移。---https://www.mulingyuer.com/archives/832/

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

Vue3 中需要使用结构的形式进行操作，引入的是工厂函数；

Vue3中app组件中可以没有根标签。

Setup() 函数特性

1. setup() 函数接收两个参数：props、context（包含attrs、slots、emit）
2. setup()函数处于生命周期 beforeCreated 两个钩子函数之前
3. 执行setup时，组件实例尚未被创建（在setup（）内部，this不会是该活跃实例的引用，即不指向vue 实例，Vue 为了避免我们错误的使用，直接将setup 函数中的this 修改成了undefined）
4. 与模版一起使用时，需要返回一个对象
5. 因为setup函数中，props时响应式得，当传入新的prop时，它就会被更新，所以不能使用es6解构，因为它会消除 prop得响应性，如果需要解构prop,可以通过使用setup函数中torefs 来完成此操作。
6. 在setup（）内使用响应式数据时，需要通过.value 获取
7. 从setup（）中返回得对象上得property 返回并且可以在模版中被访问时，它将自动展开为内部值。不需要在模版中追加.value.
8. Setup 函数只能是同步的不能是异步的。