vue中watch学习

看过就会忘，这里记录下

 data() {
    return {
      a: 1,
      msg: "Welcome to Your Vue.js App",
      person: {
        name: "www",
        age: 22
      }
    };
  }

1、普通监听

监听某一属性值变化，直接写一个监听处理函数，当每次监听到 a 值发生改变时，执行函数。

watch: {
    a: (val, oldval) {
       console.log("a==" + val, oldval);
    }
}

也可以在所监听的数据后面直接加字符串形式的方法名

a: "changeAStr"

watch: {
    a: "changeAStr",
  },
  methods: {
    changeA() {
      this.a++;
    },
    changeAStr(val, oldval) {
      console.log(`val:${val},oldval:${oldval}`);
    }
 }

2、选项：immediate

当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。
handler是watch中需要具体执行的方法
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

 watch: {
    a: {
      handler(val, oldval) {
        console.log("a==" + val, oldval);
      },
      immediate: true
    }
 }

3、选项：deep（非数组）

为了发现对象内部值的变化，可以在选项参数中指定 deep: true，进行深度监听

注意：监听数组的变更不需要这么做

当对象属性较多时，每个属性值的变化都会执行handler。
如果只需要监听对象中的一个属性值，则可以：使用字符串的形式监听对象属性

 watch: {
    "person.name": {
      handler(val, oldval) {
        console.log(`val:${val},oldval:${oldval}`);
      },
      deep: true,
      immediate: true
    }
  }