vue3 知识点 捋一遍。

• reactive 对象直接替换丢失响应式
  
  如果想替换，使用 object.assign
  1. const obj = reactive ({ a:2 })
  3. obj = {c: 1}  ❌
  4. object.assign(obj, {c: 1}) ✅

  复制代码

---

• reactive 解构失效
  
  传统解构 会失效，需要使用 toRefs
  
  1. const obj = reactive ({ a : 1 })
  3. const { a }  =  obj  // ❌  a 不再是响应式，而是一个新的地址保存了一个a的值
  5. const { a } = toRefs(obj) // ✅  
  6. 这个a 就是响应式的，且和reactive 里的 a 是同一个内存地址

  复制代码
  toRef 是解构响应式对象的 单个数据
  
  1. const obj = reactive ({ a : 1, b : 2 })
  2. const b = toRef(obj, 'b')

  复制代码
  toRef 从响应式数据解构单个
  toRefs 从响应式数据解构所有
  

---

• reactive 中的 ref 会自动拆包
  
  
  1. const obj = reactive({
  2.         a: 1,
  3.         b: ref(2)
  4. })
  5. obj.a = 1
  6. obj.b.value  ❌ 报错
  7. obj.b = 2  ✅ 不需要 .value ,会自动拆包

  复制代码

---

• computed 盘算属性修改
  
  默认是只读的​​
  但通过 get 和 set ，可对盘算属性的依赖源，间接修改
  
  1. const firstName = ref('John')
  2. const lastName = ref('Doe')
  4. // 定义可写的计算属性
  5. const fullName = computed({
  6.   get() {
  7.     return `${firstName.value} ${lastName.value}`
  8.   },
  9.   set(newValue) {
  10.     const [first, last] = newValue.split(' ')
  11.     firstName.value = first       // 对上方源数据修改
  12.     lastName.value = last || ''   // 对上方源数据修改
  13.   }
  14. })

  复制代码

---

• watch
  

• 监督ref 的基本范例 数据。
  
  1. const a = ref(0)
  2. const stopWatch = watch(a, () => {}) // 不需要 a.value
  4. stopWatch() // 停止监视

  复制代码
• 监督 ref 的对象范例 数据。
  默认 监督的是整个对象的地址，而不是内里的数据
  
  1. const obj = ref({
  2.         a: 1,
  3.         b: 2
  4. })
  6. watch(obj, () => {})                                   // 修改obj.a = 10， 回调不会执行、
  7. watch(obj, () => {}， {deep: true} ) // 修改obj.a = 10， 回调会执行

  复制代码
• 监督 reactive 对象 ，默认开启深度监听
  
• 监督 reactive 对象的某个属性
  
  1. const obj = reactive({
  2.         a: 1,
  3.         b: 2,
  4.         c: {
  5.                 ca: 'xx',
  6.                 cb: 'xxx'
  7.         }
  8. })
  10. 1. 监视的属性为 基本类型
  11. watch(obj.a, () => {})                  // ❌ 报错，vue不支持这个写法
  12. watch(() => obj.a, () => {}) // ✅ vue规定要放在一个函数里返回
  14. 2. 监视的属性为 对象类型
  15. watch(obj.c, () => {})                  // ✅ 可以，但不推荐
  16. watch(() => obj.c, () => {}) // ✅ vue官方推荐写法

  复制代码
• 监督 多个数据
  
  1. watch([ ()=obj.a, ()=>obj.b ], () => {} )

  复制代码

---

• watchEffect
  

理解为watch 的自动化， 不需要手动指定监督源，用到的自动监督, 实行回调
js watchEffect(() =>{ if（obj.a > 10） { fetch() } })

---

• vue-router 的 props 配置
  

一种 将路由参数（如 params 或 query）​​解耦​​，直接作为组件的 ​​props​​ 通报的机制。
这种设计可以让组件​​不依赖 $route 对象​​

• ​​布尔模式​
  将路由的 params ​​自动映射为组件的 props​​（仅实用于 params）。
  1. // 路由配置
  2. {
  3.   path: '/user/:id/:age',
  4.   component: User,
  5.   props: true // 自动将 `:id` 映射为组件的props 的 `id`
  6. }
  8. // 组件
  9. defineProps([id, age])

  复制代码
• ​​函数模式​​
  动态生成 props​​，可组合 params、query 或路由上下文
  1. // 路由配置
  2. {
  3.   path: '/search',
  4.   component: Search,
  5.   props: (route) => ({
  6.     keyword: route.query.q,     // 从 query 中获取 q
  7.     page: parseInt(route.query.page) || 1  // 转换数据类型
  8.   })
  9. }
  11. // 组件
  12. defineProps([keyword, page])

  复制代码

---

• pinia
  继续阅读请点击广告