随着今年Vue团队宣告终止对Vue2的支持性更新，Vue3也终于登上了他的舞台，可以大展拳脚了。我本人其实刚开始并不是很喜欢Composition API的这种写法，但写着写着怎么就开始香了。

响应式数据

  • ref vs reactive
  • ref 用于创建基本类型或对象类型的响应式数据。
  • reactive 仅用于创建对象类型的响应式数据。
  • 使用 ref 管理复杂嵌套数据结构时不够直观，频繁的 .value 访问可能不方便。
  • reactive 直接覆写原对象可能导致响应性丢失，可用 Object.assign 解决。
  • toRefs 和 toRef
  • toRefs 可将 reactive 对象解构为具响应性的独立属性。
  • toRef 用于修改 reactive 对象中的特定属性。

计算属性和监视器

  • computed 计算属性
  • 用法示例：computed(() => '这是计算属性')，默认为只读且具有缓存。
  • 可通过 get 和 set 创建可写的计算属性。
  • watch 和 watchEffect
  • watch 用于监视 reactive 数据或特定的响应式引用。
  • watchEffect 自动监视所有响应式引用，初始化时立即执行。

Vue Router

  • 安装命令：npm i vue-router。
  • 创建路由实例，区分路由组件和一般组件。
  • query 和 params 参数的使用及解构。
  • 编程式导航：router.push 和 router.replace。
  • 路由模式：hash vs history。

Pinia

  • 安装命令：npm i pinia。
  • 创建并使用 Pinia 存储。
  • storeToRefs 转换存储中的状态为响应式数据。

插槽

  • 插槽类型：默认插槽、具名插槽和作用域插槽。
  • 插槽的使用和自定义。

其他高级功能

  • shallowRef 和 shallowReactive
  • 浅响应性处理，适用于大型对象。
  • customRef
  • 自定义响应式引用，如延迟更新。