vue中$set原理（vue中$set的原理）

wptr33 2025-05-05 19:03 88 浏览

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] = 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
}

核心步骤：

判断是否是数组：数组用 splice 替代赋值（因为 Vue 对数组的监听基于方法拦截）。
通过 defineReactive() 为新属性添加 getter/setter，注入依赖收集逻辑。
通知依赖更新视图（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 吗？可以更好理解它的内部逻辑。

php array_splice

上一篇：js中常见的几种排序算法（js十大排序算法）
下一篇：数组、去重、排序、合并、过滤、删除

vue中$set原理（vue中$set的原理）

背景问题：为什么需要 $set？

$set 的作用

原理解析（Vue 2）

核心步骤：

示例

Vue 3 呢？

总结

相关推荐

程序员的开源月刊《HelloGitHub》第 71 期

如何将AI助手接入微信（打开ai手机助手）

SparkSQL——DataFrame的创建与使用

使用过 Redis 分布式锁么，它是什么回事?

VUE循环语句的使用(v-for)（vuefor循环的key）

HiveOs系统教程最细手把手教学（hiveos启动）

HIVE SQL基础语法（hive-sql）

《循环(for/while)》（循环while语句）

Spring Boot 概述（spring boot干嘛的）

西门子博途SCL高级语言之FOR循环（西门子博途for循环语句编程）