Skip to content

computer与watch

前言: 普通监听对象就是监听他的内存地址

computer

具有get和set方法;而且具有缓存(依赖属性不变则不会重新执行函数,性能更好)。

watch

通过handler与deep: true来支持深度监听,通过immediate首次监听。

注意1:handler里的this指向问题,不能使用箭头函数;

  • 使用了箭头函数this就不会指向当前的vueComponent对象

注意2:如果需要监听对象的属性变化,需要使用deep:true

  • 前提是这个属性已经存在于对象中,如果不存在则需要使用this.$set才行

注意3:监听对象时,拿不到oldValue,因为指向同一内存地址;

注意4:监听数组时,直接操作数组的下标或更改长度,就算是加 deep: true 也是监听不到的。

其实变异方法就是会改变原数组的方法,非变异方法则不会改变原数组

  • 数组的7个变异方法: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
  • 非变异方法:concat() 和 slice()、join()等 以下有效
  • this.$set( this.arr, '0', 666)
  • 结论:监听数组也是监听它的内存地址,但是deep加不加都是无所谓的。

扩展:Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

什么时候用?:

  • 1.如果一个数据依赖于其他数据做计算,那么把这个数据设计为computed的.
  • 2.如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化.