vue2和vue3的变化

监测机制变化

• vue2使用es5的object.defineProperty

object.defineProperty(obj, prop, description)

只能监测数据的查询、修改，不能监测到对象的添加删除以及数组的变化，需要使用vue的$set去修改才可以

• vue3使用es6的proxy
  增加了Map、Set等数据
  可监测对象的添加删除以及数组的变化
  可监测对象的修改、删除属性、遍历数据等等操作

组件中根节点

vue2:只能有一个根节点
vue:支持碎片化

API模式不同

vue3有两种模式：选项式以及组合式；
选项式相当于vue2：数据和方法操作分开
组合式是把相关的数据方法放在一起

建立数据方式不一样

vue2是放在data函数里；
vue3是使用setup，利用ref或者reactive方法创建响应式数据

生命周期不同

• vue2
  beforeCreate
  created
  beforeMount
  mounted
  beforeUpdate
  updated
  beforeDestroy
  destoryed
  activeated
  deactiveated
• vue3
  setup 创建组件
  onBeforeMount 挂载前
  onMounted
  onBeforeUpdate
  onUpdated
  onBeforeUnmount
  onUnmounted
  onActiveated
  onDeactiveated

传参方式不一样

• vue2
  使用props、$emit、eventBus、vuex、pubsub、$refs等。参考 vue2学习笔记里
• vue3
  使用defineProps、defineEmits、mitt、v-module、$attrs、$refs、$parent、provide_inject
  参考：vue3学习笔记

数据状态管理不同

vue2使用vuex
vue3增加了pinia。

this不一样

vue3没有this

Diff算法不一样

• vue3优化
  1. 编译阶段的优化
     更快的生成虚拟DOM，还可以使diff跳过永远不会改变的节点
     • 事件缓存
       将事件缓存，变成静态事件
     • 静态提升
       第一次创建静态节点时保存，后续直接复用
     • 添加静态标志
       给节点添加静态标志，优化Diff过程
  2. Diff优化
     • Vue2 是全量 Diff，Vue3 是静态标记 + 非全量 Diff
     • 使用最长递增子序列优化了对比流程

TS更方便