watch的使用

template中

 <div>名字：{{name}}，年龄：{{age}}</div>

script中

 export default {
     props: {  name: String  },
     data() {  return {  age: 10  } },
     watch: {
         name(newValue, oldValue) {},
         age(newValue, oldValue) {}
     },
 }

这种情况通过watch监听的数据，当字段被第一次赋值时是不会执行监听函数的。只有值再次发生改变才会执行监听。那如何才能在第一次赋值时就执行监听函数呢？这里就需要用到immediate和handler

immediate和handler使用

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
也就是说immediate值为true，则首次赋值时就执行handler函数，immediate值为false，则首次赋值时就不执行handler函数

 watch: {
     name: {
         handler(newValue, oldValue) {},
         immediate: true,
     },
     age: {
         handler(newValue, oldValue) {},
         immediate: true,
     },
 }

首次赋值监听时，oldValue值为undefined

deep 深度监听

当需要监听一个对象的改变时（注意这里监听的是整个对象），正常的watch无法监听到对象内部属性的改变，此时需要使用deep对对象进行深度监听

父组件

  people:{
      name:"露西"
  }

  btnClick() {
     this.people.name = "宙斯";
  }

子组件

  props: {
      people: {
          type: Object,
          //对象或数组的默认值必须从一个工厂函数返回。
          default: () => ({
              name: ""
          })
      }
  },
  watch: {
      people: {
          handler(newValue, oldValue) {
          },
          // immediate: true,  加上则首次也监听
          deep: true, //必须加上才能监听到people的变化
      },
  },

当对一个对象进行监听时，需要添加deep:true属性，此时修改对象内任意属性值都会被监听到。如果只想对对象中某一个属性进行监听，则可以使用字符串的形式监听对象某一个属性，如：

  watch: {
       'people.name': {
           handler(newValue, oldValue) {},
           deep: true,
       },
  }

deep和immediate可同时使用，表示首次绑定就触发监听函数

注意事项

1：数组的变动可直接进行监听，不需要deep属性，操作如下，若首次监听则需加immediate: true

增

  this.list.unshift({name: "宙斯"}) //添加到数组头部
  this.list.push({name: "宙斯"}) //添加到数组尾部

删

  this.list.shift() //删除数组头部一个元素
  this.list.pop() //删除数组尾部一个元素

改

  this.$set(this.list, 0, {name:"宙斯"}); //修改数组角标为0的数据

除特别声明，本站所有文章均为原创，如需转载请以超级链接形式注明出处：SmartCat's Blog