参考答案:
vm.$set
是 Vue 中用于在对象上设置属性并确保新属性是响应式的方法。其实现原理可以简化为以下几个步骤:
处理数组情况:
如果目标是数组,并且键是有效的数组索引,使用 splice
方法添加新元素以保持响应性。
处理已有属性: 如果属性已经存在于对象中,直接赋值。
处理新属性: 如果目标对象不是响应式对象,直接赋值新属性。
添加响应式新属性:
如果目标对象是响应式的,通过 defineReactive
方法将新属性定义为响应式。这包括定义 getter 和 setter。
通知依赖更新:
调用 ob.dep.notify()
通知所有依赖于该对象的 watchers 执行更新。
defineReactive
简要实现defineReactive
方法定义对象属性为响应式,主要步骤:
Dep
实例管理依赖。observe
递归地将属性值转化为响应式。Object.defineProperty
定义属性的 getter 和 setter。在 getter 中收集依赖,在 setter 中通知依赖更新。vm.$set
使得在运行时动态添加的新属性能够响应数据变化,从而保持 Vue 的响应式特性。
最近更新时间:2024-08-10