一、生命周期的变化

1、创建前：beforeCreate 升级成 使用setup()

2、创建后：created 升级成 使用setup()

3、挂载前：beforeMount 升级成 onBeforeMount

4、挂载后：mounted 升级成 onMounted

5、更新前：beforeUpdate 升级成 onBeforeUpdate

6、更新后：updated 升级成 onUpdated

7、销毁前：beforeDestroy 升级成 onBeforeUnmount

8、销毁后：destroyed 升级成 onUnmounted

9、异常捕获：errorCaptured 升级成 onErrorCaptured

10、被激活：onActivated 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。

11、切换：onDeactivated 比如从 A 组件，切换到 B 组件，A 组件消失时执行

二、v-if和v-for的优先级

1、在vue2中v-for的优先级高于v-if，可以放在一起使用，但是不建议这么做，会带来性能上的浪费

2、在vue3中v-if的优先级高于v-for，一起使用会报错。可以通过在外部添加一个标签，将v-for移到外层

三、diff算法

1、vue2中的diff算法

遍历每一个虚拟节点，进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方。

用patch记录的消息去更新dom

缺点：比较每一个节点，而对于一些不参与更新的元素，进行比较是有点消耗性能的。

特点：特别要提一下Vue的patch是即时的，并不是打包所有修改最后一起操作DOM，也就是在vue中边记录变更新。（React则是将更新放入队列后集中处理）。

2、vue3中的diff算法

在初始化的时候会给每一个虚拟节点添加一个patchFlags，是一种优化的标识。

只会比较patchFlags发生变化的节点，进行识图更新。而对于patchFlags没有变化的元素作静态标记，在渲染的时候直接复用。

四、 响应式原理不同

1、vue2通过Object.definedProperty()的get()和set()来做数据劫持、结合和发布订阅者模式来实现，Object.definedProperty()会遍历每一个属性。

2、vue3通过proxy代理的方式实现。proxy不需要像Object.definedProperty()的那样遍历每一个属性，有一定的性能提升proxy可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。

当属性过多的时候利用Object.definedProperty()要通过遍历的方式监听每一个属性。利用proxy则不需要遍历，会自动监听所有属性，有利于性能的提升。

五. 插槽方式不同

Vue2和Vue3具名插槽使用方式不同：vue2使用slot=''，vue3使用v-slot:''

作用域插槽使用方式不同：vue2中在父组件中使用slot-scope="data"从子组件获取数据，vue3中在父组件中使用 #data 或者 #default="{data}"获取

六、样式穿透

此处的样式穿透，官方叫做深度选择器。就是在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep。比如说父组件中修改子组件的样式。

在vue开发过程中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过一些方法穿透scoped。

1、vue2中：

/deep/ .类名{}

::v-deep .类名{}

例： ::v-deep .el-tag--warning{

        color: #e6a23c;

      }

2、vue3中：

:deep (.类名{})

::v-deep(.类名{})