vue3 $set
时间: 2025-04-30 20:48:53 浏览: 30
### Vue3中的 `$set` 方法
在Vue 3中,官方已经移除了 `Vue.set` 或者等价的实例方法 `this.$set` 的使用方式[^4]。这是因为Vue 3改进了响应式系统的底层实现机制,使得大多数情况下不再需要显式调用这些方法来确保数据变更能够被检测并触发视图更新。
#### 响应式对象属性的处理
对于普通的JavaScript对象,在Vue 2.x版本里如果想要向已有的响应式对象添加新的属性并且让这个新增加的属性也具有反应能力,则必须通过 `Vue.set(object, key, value)` 来完成操作;但是在Vue 3当中由于引入了Proxy代理技术作为核心依赖收集手段之一,因此可以直接给现有的响应式对象增加新字段而无需担心它们不会变成可观察的状态[^5]。
```javascript
// Vue 2.x 需要用 $set 添加响应式属性
this.$set(this.someObject, 'newProperty', newValue);
// Vue 3 可以直接赋值
this.someObject.newProperty = newValue;
```
#### 数组的变化侦测
当涉及到数组的时候情况稍微复杂一些。虽然Vue 3同样基于 Proxy 实现了更好的性能优化以及更全面的数据变化追踪支持,但是为了兼容旧版API设计模式下某些特定场景的需求或者出于习惯考虑,开发者仍然可以选择保留类似于 `$set` 这样的语法糖形式来进行索引位置上的元素替换:
```javascript
import { reactive } from 'vue';
const state = reactive({
items: ['a', 'b']
});
// 替换单个元素的方式一:利用内置方法 splice()
state.items.splice(index, 1, newItem);
// 方式二:模拟原生 $set 行为
function setItem(arrayRef, index, item){
arrayRef.value[index] = item; // 注意这里访问的是 .value 属性
}
setItem(state.items, 0, 'c');
```
需要注意的是,在上述例子中如果是使用组合式 API 创建出来的响应式变量(即由 `reactive()` 函数返回的对象),那么应当记得通过 `.value` 访问器去读写对应的原始值。
阅读全文
相关推荐




















