vue2.0 watch

類型：string | Function | Object

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