Vue2-watch监听器

1# watch 监听器的三种监听方式

watch: {
  value1: function(newValue, oldValue) {
    console.log('数值发生改变：', newValue);
  },
  value2: {
    handler(newValue, oldValue) {
      console.log('数值发生改变：', newValue);
    },
    immediate: true
  },
  obj: {
    handler(newObj, oldObj) {
      console.log('对象属性发生改变：', newObj);
    },
    deep: true
  }
}

2# watch 监听变量

<template>
  <div>
    <p>变量: {{ myVar }}</p>
    <p>数组: {{ myArray }}</p>
    <p>对象: {{ myObject }}</p>
    <button @click="changeData">改变数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myVar: 'Hello',
      myArray: [1, 2, 3],
      myObject: { 
          key1: 'oldValue-1',
          key2: 'oldValue-2'
      }
    };
  },
  methods: {
    changeData() {
      this.myVar = 'Vue';
      this.myArray.push(4);
      this.myObject.key1 = 'newValue-1';
      this.myObject.key2 = 'newValue-2';
    }
  },
  watch: {
    // 监听变量
    myVar: function(newVal, oldVal) {
      console.log('myVar 发生变化:', newVal);
    },
    // 监听数组
    myArray: {
      handler: function(newArray, oldArray) {
        console.log('myArray 发生变化:', newArray);
      },
      deep: true
    },
    // 监听对象的所有属性
    myObject: {
      handler: function(newObj, oldObj) {
        console.log('myObject 发生变化:', newObj);
      },
      deep: true
    },
    // 监听对象的单个属性
    "myObject.key2": {
	  handler: function(newObj, oldObj) {
        console.log('myObject.key2 发生变化:', newObj);
      },
    }
  }
};
</script>