Vue中的监视属性

一级结构的监视属性

监视属性watch

1. 监视属性的写法有两种：
   1.1 new Vue时传入watch配置

watch: {
  immediate: true,//初始化时让handler调用一下
  name: {
      // name发生变化时，handler就会调用
      handler(newValue, oldValue) {
          console.log(newValue, oldValue)
      },
   },
}

1.2 使用vue实例

  //vm为vue实例
  vm.$watch('name', {
      immediate: true,//初始化时让handler调用一下
      name: {
          // name发生变化时，handler就会调用
          handler(newValue, oldValue) {
              console.log(newValue, oldValue)
          },
      },
  })

2. 当被监视的属性发生变化时，回调函数handler会自动调用
3. 监视的属性必须存在，可以是属性或者计算属性，才能进行监视

多级结构的属性监视（深度监视）

data: {
  number: {
      a: 1,
      b: 2
  }
},
watch: {
  //监视多级结构某个属性的变化 number中a的变化
  //''是属性的原本书写方式，因为是作为key使用，我们平时使用的是简写的去掉''的形式
  'number.a': {
      handler(newValue, oldValue) {
          console.log(newValue, oldValue);
      }
  },
}

如果想要监视number中任一属性的变化，可以使用deep属性

number: {
  deep: true,//使用deep属性可以兑多层结构进行监视
  handler(newValue, oldValue) {
      console.log(newValue, oldValue);
  }
}

如果我们不需要配置项，比如deep， immediate，监视属性可以简写如下：

//使用配置
name(newValue, oldValue) {
  console.log(newValue, oldValue);
}
//使用vue实例
vm.$watch('name', function(newValue, oldValue) {
  console.log(newValue, oldValue)
})

  总结如下：
      1.vue中的watch默认不监视对象内部值的变化（一级结构）
      2.配置deep:true可以监视内部值的改变（多级结构）
  备注：
      1.vue本身可以监视对象内部值的改变，但是vue提供的watch默认不支持
      2.使用watch时根据数据的内部结构决定是否采用深度监视