Vue学习----watch方法

watch方法：

   响应数据的变化

v-model绑定：

   只能绑定固定位置的数据，不能动态绑定data底层某单独定义的数据。

举例说明

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

普通监听

1. 监听某一属性值的变化，发生改变时，执行函数。

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

2. 监听的数据后面直接加字符串形式的方法名。当每次监听到a值发生改变时，执行方法。

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

immediate和handler

1. immediate
   上述普通监听中，watch方法有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有当值发生改变时才会执行。如果项目中需要在最初绑定值的时候也执行函数，需要设置immediate属性为true

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

2. deep （非数组）
   为了发现对象内部值的变化，在选项参数中指定deep属性值为true，进行深度监听。
   当对象属性较多时，每个属性值的变化都会执行handler函数。如果只需要监听对象中的一个属性值，则可以：使用字符串的形式监听对象属性。

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