Vue之侦听属性:watch

侦听属性: watch

• 当属性变化时, 回调函数自动调用, 在函数内部进行计算

• 监视的属性必须存在,才能进监视

监视的两种写法:

• new Vue时传入watch配置

watch:{
 isHot:{
 immediate:true,//初始化时，让handler调用一下
 deep:true,//深度监视
//当isHot发生改变时，handler被调用
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
  }
 }
}

• 通过vm.$watch监视

vm.$watch('isHot',{
  immediate:true,//初始化时，让handler调用以下
  //当isHot发生改变时，handler被调用
   deep:true,//深度监视
 handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
  }
})

监视属性的简写：配置项不需要immediate\deep时才能使用

isHot(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
}

深度监视:

• vue中的watch默认不监测对象内部值的改变(一层）

• 配置deep:true可以监测对象内部值改变(多层）

• 备注:Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以;使用watch时根据数据的具体结构,决定是否采用深度监视。

computed和watch之间的区别:

• computed能完成的功能，watch都可以完成。

  watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作

• 两个重要的小原则;

  所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

  所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数,这样this的指向才是vm或组件实例对象。

总结:

• vue会监视data中所有层次的数据

• 如何监测对象中的数据?

  • 通过setter实现监视，且要在new Vue时就要传入监测数据

  • 对象中后追加的属性，Vue默认不做响应式处理

  • 如需给后添加的属性做响应式，请使用如下API

    • Vue.set(target.propertyName/index.value) 或
    • vm.$set(target.propertyName/index.value)

• 如何监测数组中的数据

  • 调用原生对应的方法对数组进行更新

  • 重新解析模板，进而更新页面

• 在Vue修改数组中的某个元素一定要使用以下方法

  • 使用这些API：push()、pop()、shift()、unshift()、splice()、reverse()

  • Vue.set()或vm.$set()

    • 特别注意Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性