Vue监听（只监听一次）、深度监听、立即执行

监听、只监听一次

• 如下是我们常用的声明式（监听）：

export default{
  data: {
    isReady: false
  },
  watch: {
    isReady(newValue, oldValue) {
      console.log(newValue)
    }
  }
}

• vue 的 watch 除了可以使用声明式的配置项以外，还可以通过命令式 this.$watch 方法。
• 如下是我们比较少用的命令式（想要初始只监听一次，必须命令式写法）：

export default {
  data: {
    isReady: false
  },
  mounted() {
    this.$watch('isReady', function(newValue, oldValue){
      console.log(newValue);
    });
  },
}

• 命令式好处是，可以得到一个取消监听的函数，在需要时取消监听，比如你想要只监听一次，可以像下面使用：
• 这里只能打印 5 false（第一次改变值）

export default {
  data: {
    isReady: false
  },
  mounted() {
      const unwatch = this.$watch('isReady', function(newValue, oldValue){
        console.log(newValue);
        unwatch()
      });
   },
   created() {
      setTimeout(() =>  {
        this.isReady = 5
      }, 2000）
      setTimeout(() =>  {
        this.isReady = 7
      }, 5000)
   }
}

深度监听（监听对象）deep： true & 立即执行 Immediate ： true

-  handler 固定写法
const vm = new Vue({
    el: '#root',
    data() {
      return {
        numbers: {
          a: 1,
          b: 1
        }
      }
    }
watch: {
  'numbers.a': {
    handler(newValue, oldValue) {
      console.log(newValue, oldValue)
      console.log('numbers正在被侦听')
    },
    deep: true,  // 是否深度监听
    immediate: true  // 页面加载立即执行
  }
-------------------------------另一种写法-----------------------------
   'dict.a'(newValue, oldValue){
        console.log(newValue, oldValue)
        console.log('numbers正在被侦听')
   },
}

• 监听整个 numbers 中 每个属性的变化

 const vm = new Vue({
    el: '#root',
    data() {
      return {
        numbers: {
          a: 1,
          b: 1
        }
      }
    },
   watch: {
      numbers: {
        handler(newValue, oldValue) {
          console.log(newValue, oldValue)
          console.log('numbers正在被侦听')
        },
        deep: true
        immediate: true
      },
    }
    created() {
        setTimeout(() =>  {
          this.numbers.a = 5
          this.numbers.b = 50
        }, 2000)
      }
  })