一，vue2和vue3相同之处

1. vue3 中还是可以使用选项式 api 的写法，vue中的data、props、computed、methods、watch、mixins 这些选项都还在，也可使用setup组合式api的写法；
2. 生命周期钩子函数保持一致（beforeUnmount，Unmounted除外）；
3. 模板语法基本上一致，我们还是可以用 v-bind 绑定数据，v-on 绑定事件，v-if 和 v-for 渲染元素等等；

二，vue2和vue3的差异

1. 创建实例的方式不同

   vue2 使用 new Vue({ }) 构造函数的方式创建；

   vue3 通过内置的 createApp( //根组件 ) 方法创建。

2. 响应式原理实现不一样

   1. vue2的双向数据绑定是使用 Object.definepropert() 对数据进行劫持，通过get(),set()方法结合发布订阅模式实现数据的响应式。

   2. vue3中使用了es6的proxy代理对数据进行处理，使用proxy 可以劫持整个data对象，然后递归返回属性的值的代理即可实现响应式。

3. 新增和修改了生命周期钩子函数

   1. 配置项声明周期组件销毁阶段的钩子函数由beforeDestroyed，destroyed 改为beforeUnmounted， unMounted

   2. vue3新增组合式生命周期

      1. 使用setup替换组件初始化阶段的两个生命周期，

      2. 新增onBeforeMount—组件挂载前调用

      3. 新增onMounted—组件挂在完成调用

      4. 新增onBeforeUpdate—组件数据更新之前被调用

      5. 新增onUpdated—组件数据更新之后被调用

      6. 新增onBeforeUnmount—组件销毁前调用

      7. 新增onUnmounted—组件销毁完成调用

4. 组件之间通信

   1. vue3新增provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

   2. vue2无

5. 对diff算法的处理

   1. vue3在diff算法中相比vue2增加了静态标记, 其作用是为了会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较,提高性能

   2. Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用
      这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用

6. 语法 API不一致

   1. 在vue2OptionsAPI中，即大家常说的选项API，即以vue为后缀的文件，通过定义配置项methods，computed，watch，data等属性与方法，共同处理页面逻辑

   2. 在 Vue3 Composition API 中，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合） , 即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有 API。

   3. Options API 碎片化使得理解和维护复杂组件变得困难, 选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块

   4. Compositon API 将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去

7. 计算属性写法变化：属性---->方法