Chaoszhu'Blog

Appearance

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来观察这个数据变化.