vue2的watch，vue2监听器

Vue2 存在两种监听方式，分别是简单监听和复杂监听

简单监听：监听的是一个回调函数，当监听的值发生改变时，才会执行监听动作。

<template>
  <h2>当前求和值为：{{ sum }}</h2>
  <button @click="sum++">点击加1</button>
</template>
 
<script>
 
export default {
  name: "TestComponent",
  data() {
    return {
      sum:1
    }
  },
  watch:{
    sum(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    }
  },
};
</script>
上面的是一个最简单的监听动作，只有在点击按钮 sum 的值变化之后，监听器 watch 才会触发。同时，我们还可以将这个方法放到 methods 中，通过方法名的方式在 watch 中实现监听效果

  watch:{
    sum:'sumAdd'
  },
  methods: {
    sumAdd(newValue, oldValue) {
       console.log('sum的值变化了',newValue, oldValue);
    }
  },
深度监听：监听的是一个包含选项的对象。除了包含简单监听的功能之外，还包含深度监听、初始化监听等。

首先，我们可以通过对象形式来实现简单监听的效果，还是按照上面的例子，例如：

// 其余代码一致
watch:{
  sum:{
    handler(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    }
  }
},
通过对象形式实现深度监听 -- deep：true 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深，也就是说即使监听的是一个对象形式的数据，只要对象内部属性发生变化，都能被监听到。

watch:{
  sum:{
    handler(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    },
    deep:true
  }
},
通过对象形式实现初始化监听 -- immediate：true 该回调将会在侦听开始之后被立即调用，也就是说在组件初始化时，就会监听一次，在数据改变之后继续监听

watch:{
  sum:{
    handler(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    },
    immediate:true
  }
},
完整的对象监听：深度监听+初始化监听

watch:{
  sum:{
    handler(newValue, oldValue) {
      console.log('sum的值变化了',newValue, oldValue);
    },
    deep: true,
    immediate:true
  }