Vue里的watch监听的几种方式

最新推荐文章于 2024-09-03 14:06:45 发布

ZHUzhuzhu08

最新推荐文章于 2024-09-03 14:06:45 发布

阅读量445

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/ZHUzhuzhu08/article/details/126084219

版权

本文详细介绍了Vue.js中普通类型和对象类型的监听器（watch）的区别与用法。通过实例展示了如何使用直接数据名作为函数名的监听，以及对象类型的监听，包括深拷贝（deep）和立即执行（immediate）选项。同时，还提到了使用`vm.$watch`在生命周期中手动监听数据变化的方法，强调了监听器在组件数据响应化中的重要作用。

摘要由CSDN通过智能技术生成

普通类型和对象类型，监听又是不一样的

普通类型（直接数据的名字当作函数名）

  data() {
    return {
      num: 1,
    };
  },
   
  watch: {
    num(newvalue, old) {
      console.log("111");
    }
  },

对象类型（几种写法）

  data() {
    return {
      obj: {
        a: 1,
      },
    };
  },

  watch: {
    //第一种
     obj: {
       handler(newValue, oldValue) {
         console.log("222");
       },
       deep: true,
       immediate: true,
     },
    //第二种
    "obj.a"(newValue, oldValue) {
        
    },
  },

还有就是使用vm.$watch监听

可以在生命周期的时候使用

第一个参数是要侦听的源；

第二个参数是侦听的回调函数callback；

第三个参数是额外的其他选项，比如deep、immediate；