vue2与vue3的区别（vue3学习记录）

vue3有选项式API（和vue2一样保留this用法）和组合式API（没有了this的概念）；选项式 API 是在组合式 API 的基础上实现的！

增加了组合式api，利于代码逻辑的组合，相关联的逻辑汇集在一处，易于代码的维护；

增加setup的语法，组合式 API 通常会与 setup 搭配使用；

vue3模板代码支持多个根节点（vue2只有一个根节点）；

vue3组合式API增加ref和reactive声明响应式数据

• ref在js中需要使用.value方式获取值，在模板中，ref 会自动解包则不需要.value获取值；

• ref在模板中解包的注意事项：在模板渲染上下文中，只有顶级的 ref 属性才会被解包

  const count = ref(0)
  const object = { id: ref(1) }
  
  // 模板代码
  // 可以正常工作
  {{ count + 1 }}
  // 下面的无非正常工作(会输出[object Object]1)，因为在计算表达式时 object.id 没有被解包，仍然是一个 ref 对象
  {{ object.id + 1 }}
  // 可以利用结构来解决该问题
  const { id } = object
  {{ id + 1 }} // 输出2
  // 另一个需要注意的点是，如果 ref 是文本插值的最终计算值 (即 {{ }} 标签)，那么它将被解包，因此以下内容将渲染为 1
  // 该特性仅仅是文本插值的一个便利特性，等价于 {{ object.id.value }}
  {{ object.id }}
  

• reactive() 只适用于对象 (包括对象、数组和内置类型，如 Map 和 Set)。而另一个 API ref() 则可以接受任何值类型

• reactive不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失，例如下面的例子：

  let state = reactive({ count: 0 })
  
  // 上面的 ({ count: 0 }) 引用将不再被追踪
  // (响应性连接已丢失！)
  state = reactive({ count: 1 })
  

• reactive对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接

  const state = reactive({ count: 0 })
  
  // 当解构时，count 已经与 state.count 断开连接
  let { count } = state
  // 不会影响原始的 state
  count++
  
  // 该函数接收到的是一个普通的数字
  // 并且无法追踪 state.count 的变化
  // 我们必须传入整个对象以保持响应性
  callSomeFunction(state.count)
  

vue3组合式与TS更好的适配；

vue3增加hooks；

生命周期重命名beforeDestroy->beforeUnmount、destroyed->unmounted