vue2与vue3的区别
1. 生命周期函数的不同
| vue2.0 | vue3.0 |
|---|---|
| beforeCreate 组件创建之前执行 | setup 开始创建组件 |
| Created 组件创建之后执行 | setup 开始创建组件 |
| beforeMount 组件挂载到页面之前执行 | onBeforeMount |
| mounted 组件挂载到页面之后执行 | onMounted |
| beforeUpdate 组件更新之前执行 | onBeforeUpdate |
| updated 组件更新之后执行 | onUpdated |
| beforeDestroy 组件销毁之前执行 | onBeforeUnmount |
| destroyed 组件销毁之后执行 | onUnmounted |
2. 数据双向绑定原理不同
vue2是采用了ES5中的Object.defiendPropety的方法劫持数据，并结合发布订阅者模式是实现双向数据绑定；vue3是采用了ES6的proxy方法代理对象的方式进行实现。
vue3.O的优势：
1.解决了Object.defiendPropety()方法无法监听到某些对象操作的变化（例如对象属性的添加删除，通过下标添加数组元素、以及set、map数据结构 class类等等）
2.Object.defiendPropety()需要遍历data中的数据添加get/set,proxy方法直接代理整个对象，可以省去for...in，闭包等内容来提升效率
3.proxy方法唯一不好的地方就是兼容性差，无法支持IE浏览器的使用
3. 定义方法与属性的方式不同
| vue2.0 | vue3.0 |
|---|---|
| data中定义属性，method中定义方法 | setup方法中定义（3.2以后可以使用setup语法糖） |
vue2中的data的属性都是响应式的，vue3则引入ref和reactive来创建响应式数据
setup语法糖：
直接在script标签后添加 steup；最大优势：直接定义属性与方法，不需要return
4. api类型不同
| vue2.0 | vue3.0 |
|---|---|
| 选型api(optionAPI) | 组合型API(compositionAPI) |
| 在代码中分割不同属性：data，computed，methods等 | 按照方法来分割，代码比较简洁 |
5. v-model的不同
| vue2.0 | vue3.0 |
|---|---|
| prop : value 传递事件为：input | prop : modelValue 传递事件 : updata:modelValue |
| 可以使用.sync修饰符实现类型双向数据绑定的效果 | 移除了.sync修饰符，采用自定义修饰符的方式进行替换（v-model后面添加参数的形式）（v-model:text） |
| 不可以使用多个v-model | 可以使用多个v-model |
6. 是否支持碎片化
| vue2.0 | vue3.0 |
|---|---|
| 不支持（只存在一个根节点） | 支持（可以存在多个根节点） |
7. 指令与插槽不同
| vue2.0 | vue3.0 |
|---|---|
| 允许直接使用slot标签，v-if与v-for不可以一起使用 | 不允许直接使用slot标签，正确格式为v-slot,v-if与v-for可以一起使用 |
在vue2中，v-for的优先级高于v-if,所以不能一起使用，vue3中 v-if的优先级比较高
8. 父子组件传参的方式不同
| vue2.0 | vue3.0 |
|---|---|
| 子组件通过props属性进行接收，通过$emit的方式进行派发事件 | 子组件通过defineProps方法进行接收，通过defineEmits的方式进行派发事件 |
在vue3的steup语法糖中，父组件引入子组件后不需要注册，可以直接使用
9. main.js文件不同
| vue2 | vue3 |
|---|---|
| 使用prototype（原型）的形式进行操作，引入的是构造函数 | 需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没用根标签 |
