土特产网站的制作,网站硬件防火墙,购买网站模版可以自己做吗,好看的网页源码Vue 中的 $set 方法#xff08;Vue.set#xff09;主要用于 向响应式对象中添加一个新的属性#xff0c;并确保这个新属性是响应式的#xff0c;能够触发视图更新。 #x1f4cc; 背景问题#xff1a;为什么需要 $set#xff1f;
在 Vue 2 中#xff0c;直接给对象新增…Vue 中的 $set 方法Vue.set主要用于 向响应式对象中添加一个新的属性并确保这个新属性是响应式的能够触发视图更新。 背景问题为什么需要 $set
在 Vue 2 中直接给对象新增属性不会触发视图更新例如
this.obj.a 123 // 如果 a 原本不存在则不会触发视图更新这是因为 Vue 2 是基于 Object.defineProperty 来实现响应式系统的它在对象初始化时只能“劫持”已有属性无法监控新增的属性。 ✅ $set 的作用
this.$set(obj, key, value)或者
Vue.set(obj, key, value)它的作用是 为对象添加新属性 让这个新属性是响应式的 触发视图更新 原理解析Vue 2
Vue.set function (target, key, val) {if (Array.isArray(target) isValidIndex(key)) {// 对数组使用 splice 替代设置target.splice(key, 1, val)return val}if (key in target !(key in Object.prototype)) {target[key] valreturn val}const ob target.__ob__ // 这是 Observer 实例if (!ob) {target[key] valreturn val}defineReactive(ob.value, key, val) // 核心为新属性定义响应式ob.dep.notify() // 通知依赖更新return val
}核心步骤 判断是否是数组数组用 splice 替代赋值因为 Vue 对数组的监听基于方法拦截。 通过 defineReactive() 为新属性添加 getter/setter注入依赖收集逻辑。 通知依赖更新视图dep.notify() 示例
templatediv{{ user.name }}/divbutton clickaddProp添加新属性/button
/templatescript
export default {data() {return {user: {}}},methods: {addProp() {this.$set(this.user, name, 张三) // 触发视图更新}}
}
/scriptVue 3 呢
在 Vue 3 中由于使用了 Proxy 实现响应式不需要 $set 了你可以直接赋值
reactiveObj.newKey 123 // ✅ 直接响应式无需 $set总结
项目Vue 2Vue 3添加响应式属性需要 $set不需要直接赋值即可实现机制Object.defineProperty defineReactiveProxy 拦截所有操作数组监听依赖重写 push/splice 等方法Proxy 完整拦截 需要我帮你用简单代码实现一个简化版的 $set 吗可以更好理解它的内部逻辑。
