*11 vue3 中的 watch 函数

最新推荐文章于 2024-11-11 21:53:26 发布

原创最新推荐文章于 2024-11-11 21:53:26 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js #Vue3

Vue3 专栏收录该内容

11 篇文章

订阅专栏

文章详细阐述了在Vue2中，watch函数在监控ref和reactive定义的响应式数据时的行为差异，包括oldValue的获取、深度监视的设置以及针对对象属性的监听。对于reactive对象，直接监控时默认开启深度监视且无法关闭，而针对特定属性的监听则需额外配置。

与 vue2 中的 watch 函数功能相同

注意：

监视 reactive 函数定义的响应式数据时，oldValue 无法正确获取，强制开启深度监视

监视 reactive 函数定义的响应式数据中某个属性（该属性为对象，内部还有属性）时，deep 配置有效

  // 情况一 监视ref所定义的响应式数据
    // watch(sum,(newValue,oldValue)=>{
    //   console.log('sum变了',newValue,oldValue)
    // })

    // 情况二 监视多个ref所定义的响应式数据
    // watch([sum,msg],(newValue,oldValue)=>{
    //   console.log(newValue,oldValue)
    // },{immediate:true,deep:true})

    // 情况三 监视reactive所定义的响应式数据(对象)
    // (无法正确的获取oldValue)(当监视reactive直接定义的数据时，默认开启深度监视，且无法关闭)
    // watch(person,(newValue,oldValue)=>{
    //   console.log(newValue,oldValue)
    // })

    // 情况四 监视reactive所定义的响应式数据(对象中的属性)
    // watch(()=>person.age,(newValue,oldValue)=>{
    //   console.log(newValue,oldValue)
    // })

    // 情况五 监视reactive所定义的响应式数据(对象中的多个属性)
    // watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
    //   console.log(newValue,oldValue)
    // })

    // 特殊情况
    watch(()=>person.job,(newValue,oldValue)=>{
      console.log(newValue,oldValue)
    },{deep:true})