vue中$set原理

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)

它的作用是:

  1. 为对象添加新属性

  2. 让这个新属性是响应式的

  3. 触发视图更新


🧠 原理解析(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] = val
    return val
  }

  const ob = target.__ob__  // 这是 Observer 实例
  if (!ob) {
    target[key] = val
    return val
  }

  defineReactive(ob.value, key, val) // 核心:为新属性定义响应式
  ob.dep.notify()  // 通知依赖更新
  return val
}

核心步骤:

  1. 判断是否是数组 :数组用 splice 替代赋值(因为 Vue 对数组的监听基于方法拦截)。

  2. 通过 defineReactive() 为新属性添加 getter/setter,注入依赖收集逻辑。

  3. 通知依赖更新视图(dep.notify()


🧪 示例

复制代码
<template>
  <div>{{ user.name }}</div>
  <button @click="addProp">添加新属性</button>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    }
  },
  methods: {
    addProp() {
      this.$set(this.user, 'name', '张三') // 触发视图更新
    }
  }
}
</script>

🆕 Vue 3 呢?

Vue 3 中,由于使用了 Proxy 实现响应式,不需要 $set,你可以直接赋值:

复制代码
reactiveObj.newKey = 123 // ✅ 直接响应式,无需 $set

🧩 总结

项目 Vue 2 Vue 3
添加响应式属性 需要 $set 不需要,直接赋值即可
实现机制 Object.defineProperty + defineReactive Proxy 拦截所有操作
数组监听 依赖重写 push/splice 等方法 Proxy 完整拦截

需要我帮你用简单代码实现一个简化版的 $set 吗?可以更好理解它的内部逻辑。

相关推荐
paopaokaka_luck1 小时前
基于Spring Boot+Vue的吉他社团系统设计和实现(协同过滤算法)
java·vue.js·spring boot·后端·spring
伍哥的传说3 小时前
Radash.js 现代化JavaScript实用工具库详解 – 轻量级Lodash替代方案
开发语言·javascript·ecmascript·tree-shaking·radash.js·debounce·throttle
程序视点3 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian4 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
iamlujingtao4 小时前
js多边形算法:获取多边形中心点,且必定在多边形内部
javascript·算法
嘉琪0014 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴4 小时前
Smoothstep
前端·webgl
若梦plus5 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员5 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉5 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro