Vue 数据相关实例方法vm.$watch、vm.$set、vm.$delete介绍

vm.$watch

观察vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。

//写法一：
this.$watch('a.b.c', function (newVal, oldVal) {})//键路径
vm.$watch( function () { this.fullName=this.firstName+' '+this.lastName; } )//函数

//写法二：
watch:{
    a:function(val,oldVal){},
    "a.b"：{
        handler:function(newVal,oldVal){},
        deep:true//如果监听的是一个对象，对象内部值发生变化，需要设置deep=true；
    },
　　 c:{
　　   handler:function(newVal,oldVal){},
      immediate:true//该回调将会在监听开始之后立即调用
　　 }
}

 

vm.$set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新

语法：vm.$set( target,key,value )

对于对象，propterty必须在data对象上存在才能让Vue将它转换为响应式的

var vm = new Vue({
    data:{
        a:1
      }
})
vm.a = 1  // 响应式的
vm.b = 2  // 非响应式的
//Vue不允许添加根级别的响应式属性，但是可以使用
this.$set(this.someObject, "b", 2)||Vue.set(vm.someObject, "b" ,2)

对于数组，Vue不能检测以下数组的变动

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
this.Sset(this.items,1,"x");//处理方法

vm.$delete

删除对象的属性，如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开vue不能检测到属性被删除的限制。

语法：vm.$delete(target,key)

var vm = new Vue({..})
vm.delete(this.info, "age")