vue3 知识点 捋一遍。

[复制链接]
发表于 2025-4-29 02:42:26 | 显示全部楼层 |阅读模式

  • reactive 对象直接替换丢失响应式

    如果想替换,使用 object.assign
    1. const obj = reactive ({ a:2 })
    2. obj = {c: 1}  ❌
    3. object.assign(obj, {c: 1}) ✅
    复制代码



  • reactive 解构失效

    传统解构 会失效,需要使用 toRefs
    1. const obj = reactive ({ a : 1 })
    2. const { a }  =  obj  // ❌  a 不再是响应式,而是一个新的地址保存了一个a的值
    3. const { a } = toRefs(obj) // ✅  
    4. 这个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')
    3. // 定义可写的计算属性
    4. const fullName = computed({
    5.   get() {
    6.     return `${firstName.value} ${lastName.value}`
    7.   },
    8.   set(newValue) {
    9.     const [first, last] = newValue.split(' ')
    10.     firstName.value = first       // 对上方源数据修改
    11.     lastName.value = last || ''   // 对上方源数据修改
    12.   }
    13. })
    复制代码



  • watch

  • 监督ref 的基本范例 数据。
    1. const a = ref(0)
    2. const stopWatch = watch(a, () => {}) // 不需要 a.value
    3. stopWatch() // 停止监视
    复制代码
  • 监督 ref 的对象范例 数据。
    默认 监督的是整个对象的地址,而不是内里的数据
    1. const obj = ref({
    2.         a: 1,
    3.         b: 2
    4. })
    5. watch(obj, () => {})                                   // 修改obj.a = 10, 回调不会执行、
    6. 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. })
    9. 1. 监视的属性为 基本类型
    10. watch(obj.a, () => {})                  // ❌ 报错,vue不支持这个写法
    11. watch(() => obj.a, () => {}) // ✅ vue规定要放在一个函数里返回
    12. 2. 监视的属性为 对象类型
    13. watch(obj.c, () => {})                  // ✅ 可以,但不推荐
    14. watch(() => obj.c, () => {}) // ✅ vue官方推荐写法
    复制代码
  • 监督 多个数据
    1. watch([ ()=obj.a, ()=>obj.b ], () => {} )
    复制代码



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


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

  • ​​布尔模式​
    将路由的 params ​​自动映射为组件的 props​​(仅实用于 params)。
    1. // 路由配置
    2. {
    3.   path: '/user/:id/:age',
    4.   component: User,
    5.   props: true // 自动将 `:id` 映射为组件的props 的 `id`
    6. }
    7. // 组件
    8. 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. }
    10. // 组件
    11. defineProps([keyword, page])
    复制代码



  • pinia
    继续阅读请点击广告

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
回复

使用道具 举报

© 2001-2025 Discuz! Team. Powered by Discuz! X3.5

GMT+8, 2025-7-9 10:18 , Processed in 0.083864 second(s), 31 queries 手机版|qidao123.com技术社区-IT企服评测▪应用市场 ( 浙ICP备20004199 )|网站地图

快速回复 返回顶部 返回列表