1. 响应式原理不同
- vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的
- vue3发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势：
- 可直接监听数组类型的数据变化 性能的提升 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 可直接实现对象属性的新增/删除
相比于vue2.x，使用proxy的优势如下
defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
2. 组合式API和选项式API
在vue2中采用选项式API，将数据和函数集中起来处理，将功能点切割了当逻辑复杂的时候不利于代码阅读。
在vue3中采用组合式API，将同一个功能的代码集中起来处理，使得代码更加有序，有利于代码的书写和维护。
3. 生命周期的变化
创建前：beforeCreate -> 使用setup()
创建后：created -> 使用setup()
挂载前：beforeMount -> onBeforeMount
挂载后：mounted -> onMounted
更新前：beforeUpdate -> onBeforeUpdate
更新后：updated -> onUpdated
销毁前：beforeDestroy -> onBeforeUnmount
销毁后：destroyed -> onUnmounted
异常捕获：errorCaptured -> onErrorCaptured
被激活：activated -> onActivated 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
切换：deactivated -> onDeactivated 比如从 A 组件，切换到 B 组件，A 组件消失时执行
4. v-if和v-for的优先级
在vue2中v-for的优先级高于v-if，可以放在一起使用，但是不建议这么做，会带来性能上的浪费
在vue3中v-if的优先级高于v-for，一起使用会报错。可以通过在外部添加一个标签，将v-for移到外层
5. diff算法不同
vue2中的diff算法
遍历每一个虚拟节点，进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方。
用patch记录的消息去更新dom
缺点：比较每一个节点，而对于一些不参与更新的元素，进行比较是有点消耗性能的。
特点：特别要提一下Vue的patch是即时的，并不是打包所有修改最后一起操作DOM，也就是在vue中边记录变更新。（React则是将更新放入队列后集中处理）。
vue3中的diff算法
在初始化的时候会给每一个虚拟节点添加一个patchFlags，是一种优化的标识。
只会比较patchFlags发生变化的节点，进行识图更新。而对于patchFlags没有变化的元素作静态标记，在渲染的时候直接复用。
6. 根节点不同
- 在vue2中：必须要有根标签，一旦根节点有多个，vue会发出报错
- 在vue3中：vue3中可以没有根标签，会默认将多个根标签包裹在一个fragement虚拟标签中，有利于减少内存。支持多根节点（减少了DOM元素的嵌套层级）
7. 插槽方式不同
在vue2中
匿名插槽
子组件：
<div>
<slot></slot>
</div>
父组件：
<child>
<span>我是插槽插入的内容</span>
</child>
具名插槽
子组件：
<div>
<slot name="person"></slot>
</div>
父组件：
<child>
<span slot="person">我是插槽插入的内容</span>
</child>
作用域插槽：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。不过，我们可以在父组件中使用slot-scope 特性从子组件获取数据
<div>
<slot :data="data"></slot>
</div>
父组件：
<child>
<span slot-scope="data">我是插槽插入的内容</span>
</child>
在vue3中
匿名插槽：和在vue2中一样
具名插槽：
子组件：
<div>
<slot name="person"></slot>
</div>
父组件：
<child>
<template v-slot:person>
<span>我是插槽插入的内容</span>
</template>
</child>
作用域插槽：
子组件：
<div>
<slot :data="data"></slot>
</div>
父组件：
<child>
<span #data>我是插槽插入的内容</span> === <span #default="{data}">我是插槽插入的内容</span>
</child>
总结：
具名插槽使用方式不同：vue2使用slot='',vue3使用v-slot:''
作用域插槽使用方式不同：vue2中在父组件中使用slot-scope="data"从子组件获取数据，vue3中在父组件中使用 #data 或者 #default="{data}"获取
8. 样式穿透
vue2中：
/deep/ .类名{}
/deep/ .el-header {
padding: 0px;
}
/deep/ .el-aside {
width: 230px !important;
}
vue3中：
:deep (.类名{})
::v-deep(.类名{})
::v-deep .el-input__inner {
color: #ffffff;
}:deep(.el-card__body) {
display: flex;
flex-direction: column;
flex: 1;
overflow-y: auto;
}9. typescript支持
- vue2中：默认是不支持typescript的。
- vue3中：支持使用typescript，使用typescript在构建大型项目时，能够很好的提高项目开发的质量。
