浅谈 Vue 的实例方法 vm.$set()、vm.$set()、vm.$delete()

vm.$set

  • 功能:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于响应式对象上添加新属性,因为vue无法探测普通的新增属性(如 this.myObject.newProperty=‘hi’) 注意:对象不能是vue实例,或者vue实例的跟数据对象
  • 位置:Vue.set() global-api/index.js
  • vm.$set() instance/index.js
  • set() 方法 observer/index.js

vm.$delete

  • 功能: 删除对象的属性,如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开vue不能检测到属性被删除的限制,
  • 注意:目标对象不能是一个vue实例或vue实例的根数据对象。
  • 定义位置: Vue.delete() global-api/index.js
  • vm.$delete() instance/index.js
  • 源码: src\core\observer\index.js

vm.$watch(expOrFn,callback,[options])

  • 功能:观察vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
  • 参数
    expOrFn: 要监视的$data中的属性,可以是表达式或函数
    callback: 数据变化后执行的回调函数,对象 具有handler属性(字符串或者函数),如果该属性为字符串则methods中相应的定义。
    options:deep 布尔型 深度监听、immediate 布尔型 是否立即执行一次回调函数

猜你喜欢

转载自blog.csdn.net/weixin_40599109/article/details/108399753