10.vue2.x之vue2.x的实例方法 / 数据

vue2.x之vue2.x的实例方法 / 数据

vm.$watch

vm.$watch( expOrFn, callback, [options] )
返回值：{fn} unwatch
expOrFn:字符串或者函数类似。为字符串时，表示侦听的对象。为函数时，函数返回依赖的data或者computed组成的表达式。
callback：回调函数，当expOrFn变化时，其都会重新执行。
options：选项，包含{boolean} deep，{boolean} immediate。deep为true时，可以监听到对象内部值的变化。immediate为true时，将立即以expOrFn的当前值触发callback。
unwatch：返回值为一个取消侦听的函数。

...
const unwatch=vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
    if(unwatch){
    	unwatch()//本次观察内部取消监听需要做判断
    }
  },
  {
	immediate:true,//立即执行callback
	deep:true//观察对象内部
}
)
...

vm.$set

vm.$set( target, propertyName/index, value )
作用：给对象或者数组添加响应式的数据。

应用场景：
1、当利用索引直接设置数组的某一项时，例如：vm.items[indexOfItem] =newValue，不会更新数组。
2、当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。

    使用vm.$set( array, index, value )更新数组成员，便能够让添加的数据为响应式的数据。

vm.$delete

vm.$delete( target, propertyName/index )
作用：删除对象或者数组中的数据。