vue数据绑定数组或者对象，改变元素时不更新view问题

最新推荐文章于 2024-07-05 11:27:33 发布

哎呦喂1111

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量954

点赞数 2

分类专栏： web前端文章标签： vue数据绑定数组或者对象，改变元素时不更新view问题

本文链接：https://blog.csdn.net/qq_31965515/article/details/87273148

版权

Vue的双向数据绑定机制依赖于Object.defineProperty，但不适用于数组。当直接修改数组元素或对象属性时，Vue无法检测到变化，导致视图不更新。解决方法包括使用数组的mutator方法（push、pop等）或Vue实例的$set方法。同样，新增或删除对象属性也需要使用$set或$delete来确保响应式。

摘要由CSDN通过智能技术生成

官方文档

<body>
    <div class="box">
        <div v-for="aa in aas">{
  {aa}}</div>
        <button @click="change">变数据 </button>
    </div>
</body

var vm = new Vue({
            el:".box",
            data:{
                aas:["ss","ddd","fff","bbb"]
            },
            methods:{
                change(){
                // 点击按钮时，改变aas的最后一个元素，
                // 数据变了 但是view没有更新
                    this.aas[3] = 444;
                }
            }
        })

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