009_重学Vue_监听属性

监听属性

监听属性也是Vue的一个配置项，写在watch里。不仅可以监听data中的属性，还可以监听computed中的属性。

监听属性有一个handler方法，当属性值发生变化时，这个方法会被调用。handler 有两个参数：newValue 和 oldValue，我们通常可以对比两个值的变化来做一些处理。

监视普通属性

<span @click="isHot=!isHot">今天天气{{isHot ? "很热" : "凉快"}}</span>

const vm = new Vue({
  el: '#app',
  data: {
    isHot: false,
  },
  watch: {
    isHot: {
      //对象中的 'isHot' 简写成 isHot
      handler(newValue, oldValue) {
        console.log('isHot发生了变化', newValue, oldValue)
      },
      immediate: true, //初始化的时候让 handler 执行一下
    },
  },
})

也可以通过vm.$watch方法添加监视，监视的属性必须有引号。

vm.$watch('isHot', {
  handler(newValue, oldValue) {
    console.log('isHot发生了变化', newValue, oldValue)
  },
})

1. 同一个属性可以添加多个监视。
2. 监视的属性必须是存在的，如果不存在则没有任何意义，程序也不会报错。

监听多级属性

<span @click="numbers.a++">a的值是{{numbers.a}}</span>

const vm = new Vue({
  el: '#app',
  data: {
    numbers: {
      a: 1,
      b: 2,
      c: {
        d: {
          e: 1,
        },
      },
    },
  },
  watch: {
    //只监听 numbers 的 a 属性的变化。
    'numbers.a': { //写好全路径监听多级
      handler(newValue, oldValue) {
        console.log('a发生了变化', newValue, oldValue)
      },
    },
    //监听 numbers 中所有属性的变化，包括多级，譬如：numbers.c.d.e
    numbers: {
      deep: true, 
      handler(newValue, oldValue) {
        console.log('numbers发生了变化', newValue, oldValue)
      },
    },
  },
})

Vue 为了考虑性能问题，默认不监听多级属性，如果需求监听多级属性需求手动设置 deep: true。

监听属性简写

普通监听

  watch: {
    isHot(newValue, oldValue) {
      console.log('isHot发生了变化', newValue, oldValue)
    },
  },

全局监听

vm.$watch('isHot', function (newValue, oldValue) {
  console.log('isHot发生了变化', newValue, oldValue)
})

注意这里的function不能是箭头函数，所有Vue管理的函数都不能是箭头函数，包括：

1. methods中的函数。
2. 监听中的handler。
3. 计算属性中的get、set。
4. $watch简写时的函数。