vue2.0 watch 详解

vue官网解释: 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

也就是说watch可以监听对象的变化,规则是键值对方式。

export default {
  props: {
    fatherAjaxData: {
      type: Object
    }
  },
  data() {
    return {
      a: 1,
      b: 2,
      c: 3
    }
  },
  watch: {
    // 父级异步加载的数据 props 方式给到 当前子级
    fatherAjaxData: function (val, oldVal) {
      this.$nextTick(() => {
        console.log('监听到已异步加载的fatherAjaxData数据 已有值');
      });
    },
    a: function (val, oldVal) {
      console.log(`watch a val change --- new val: ${val}, old val: ${oldVal}`);
    },
    // watch_b_val_change 方法名
    b: 'watch_b_val_change',
    c: {
      handler: function (val, oldVal) {
        console.log(`watch c val change --- new val: ${val}, old val: ${oldVal}`);
      },
      deep: true // 为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
    }
  },
  mounted() { // vue 生命周期方法 vue页面全部加载完毕(不包括异步数据)
    this.$nextTick(() => {
      console.log('vue页面加载完毕!');
    });
  },
  methods: {
    watch_b_val_change(val, oldVal) {
      console.log(`watch b val change --- new val: ${val}, old val: ${oldVal}`);
    }
  }
};

this.$nextTick :vue生命周期方法 当数据发生变化 dom变化后 执行$nextTick的callback方法

deep: 为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

.