vue改变数组的值，不更新视图解决方案

最新推荐文章于 2025-06-19 11:53:09 发布

原创最新推荐文章于 2025-06-19 11:53:09 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #js #数组

笔记专栏收录该内容

31 篇文章

订阅专栏

Vue.js由于JavaScript限制无法直接检测数组和对象的变化，但通过包裹某些数组方法如push、pop等，可以触发视图更新。直接修改数组元素或长度则无法监听到变化。为解决这个问题，Vue提供了Vue.set方法或使用splice来手动更新视图。确保在修改数组时使用这些方法以保持数据绑定的同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。但是Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：:

   push(),pop(),shift(),unshift(),splice(),sort(),reverse()

而通过直接修改数组某一项的值或者改变数组的length，vue不能监听到数组变化。

 app.book[3] = 'xxxx';
 // or
 app.books.length =1;

因为vue实现双向数据绑定的机制是数据劫持，也就是在所有对象上有个Object.defineProperty()方法，通过监听set，get方法去实现，而数组没有这两个方法，所以就不会更新view；解决方案就是，需要我们主动通知vue。

👉 Vue.set( target, propertyName/index, value )
我们可以使用官方给出的方案来通知视图更新：

        // 在this实例上通知
        this.$set(this.aas,3,this.aas[3])
        
        // or 在全局对象上通知
        Vue.set(this.aas,3,this.aas[3])

也可以使用vue可以监听到的数组方法 splice来解决：
👉 splice用法

	this.aas.splice(3,1,"444");
	// or
	this.aas.splice(0);

这些在vue官方文档中都是有说明哒～可以去官方文档看看详细介绍