如何解决Vue中给data中的对象属性添加一个新的属性时响应式不生效的问题？

最新推荐文章于 2025-04-17 17:09:11 发布

原创最新推荐文章于 2025-04-17 17:09:11 发布 · 1.7k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #Vue的响应式系统

Vue.js 专栏收录该内容

74 篇文章

订阅专栏

vue2的响应式原理使用的是对象代理去实现的，对象代理中有一个get和set方法，当我们访问对象的时候就会触发get方法，当我们对对象中的值进行修改时会触发set方法。但是当我们给对象添加一个新的属性时对象代理是检测不到的，所以就会出现直接给对象添加属性响应式不生效的问题。

在Vue中，给data中的对象添加一个新属性时，Vue默认不会检测到这个属性的添加，因此，不会触发视图的更新。为了解决这个问题，也就是说怎么才能添加响应式的属性呢？Vue提供了几种方法来添加响应式属性：

1、在vue中可以使用 this.$set(对象名,'属性名'，属性值) 的方法去给对象添加属性，或者使用Vue.set(对象名,'属性名',属性值) 的方法进行添加，添加之后的属性就带有响应式了。

示例参看：vue给对象添加属性没有响应式的问题及解决_vue.js_脚本之家

- 使用Vue.set()方法：

Vue.set(vm.someObject, 'newProp', 'value');

通过Vue.set向响应式对象中添加一个property，并确保这个新 property同样是响应式的，且触发视图更新。

- 使用对象的$set()方法（实例方法）：

 this.$set(this.someObject, 'newProp', 'value');

番外：Vue.set 方法接收三个参数：

{Object | Array} target: 响应式对象
{string | number} key: 要设置的属性名 ——propertyName / index
{any} value: 属性值

Vue.set( target, propertyName/index, value )

关于Vue.set源码（省略了很多与本节不相关的代码）

源码位置：src\core\observer\index.js

注：Vue2.6.12版本的源码可参看：https://www.jb51.net/article/269625.htm

function set (target: Array<any> | Object, key: any, val: any): any {
  ...
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

这里无非再次调用defineReactive方法，实现新增属性的响应式

关于defineReactive方法，内部还是通过Object.defineProperty实现属性拦截

大致代码如下：

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log(`set ${key}:${newVal}`);
                val = newVal
            }
        }
    })
}

参考：Vue.set()方法的使用，以及对其进行深入解析

2、使用Object.assign()或展开运算符来给对象添加属性，并确保赋值是在Vue的响应式系统的作用范围内：

示例参看：vue给对象添加属性没有响应式的问题及解决_vue.js_脚本之家

直接使用Object.assign()添加到对象的新属性不会触发更新，应创建一个新的对象，合并原对象和混入对象的属性。

// 使用Object.assign
this.someObject = Object.assign({}, this.someObject, { newProp: 'value' });

3、使用展开运算符：'...' 来给对象添加新属性

// 使用展开运算符
this.someObject = { ...this.someObject, newProp: 'value' };

4、使用this.$forceUpdata()函数使得vue强制更新视图和数据（不推荐使用）。

调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。

如果你发现你自己需要在Vue中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。$forceUpdate()方法迫使Vue实例重新渲染。

PS：仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。

示例参看：vue给对象添加属性没有响应式的问题及解决_vue.js_脚本之家

小结

如果为对象添加少量的新属性，可以直接采用Vue.set()
如果需要为新对象添加大量的新属性，则通过Object.assign()或展开运算符：'...' 创建新对象
如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (~~不建议~~)

PS：vue3是用过proxy实现数据响应式的，直接动态添加新属性仍可以实现数据响应式

可以直接采用Vue.set()
如果需要为新对象添加大量的新属性，则通过Object.assign()或展开运算符：'...' 创建新对象
如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (~~不建议~~)

因为vue不能检测到对象属性的添加或者删除，只有在data对象上存在的属性是响应式的，所以要使用Vue.set()方法将响应式属性添加到对象上。同样的道理，（Vue 2.6+）使用Vue.delete()或vm.$delete()方法来删除属性，同时Vue也能够检测到属性的删除。

综上所述，以上方法可以确保在Vue中给对象添加或删除新属性时，视图能够正确更新。

参考资料

「Vue面试题」动态给vue的data添加一个新的属性时会发生什么？如何去解决？-优快云博客

使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法_vue.js_脚本之家

vue给对象添加属性没有响应式的问题及解决_vue.js_脚本之家

动态给vue的data添加⼀个新的属性时会发⽣什么？怎样解决？ - 简书

Vue 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？-优快云博客