vue的watch监听项目

vue中的watch监听

vue中的watch和computed 看上去很相似，实际上有很大区别；

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

这里简单介绍一下watch的使用。

<template>
  <div>
    <button @click="change" style="margin-right:20px">改变输入值</button>
    <input type="number" v-model="value">
    <br>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: 0

    }
  },
  watch: {
    value (newValue, oldValue) {
      console.log('改变了', '新值：', newValue, '旧值：', oldValue)
    }

  },
  methods: {
    change () {
      this.value = this.value + 1
    }

  }
}
</script>

这就是一个最简单监听，监听一个值的动向，如果这个值改变了，watch就会触发。demo这里value是一个数字类型，每次点击值会增加改变 所以每次点击都会触发watch监听效果
监听的是一个值，所以这里直接拿这个值就可以了 ，它有2个属性，第一个是新值，第二个是上一次的值。

如果监听的是个对象或者是对象中的属性

  watch: {
    // 具体某个值
    'value.a': {
      handler (newValue, oldValue) {
        console.log('改变了', '新值：', newValue, '旧值：', oldValue)
      },
      deep: true, // 对象内部的属性监听，也叫深度监听
      immediate: true // 立即监听
    }
    // 监听对象
    // value: {
    //   handler (newValue, oldValue) {
    //     console.log('改变了', '新值：', newValue, '旧值：', oldValue)
    //   },
    //   deep: true, // 对象内部的属性监听，也叫深度监听
    //   immediate: true // 立即监听
    // }
  },