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

最新推荐文章于 2024-10-14 09:18:13 发布

牛长犇

最新推荐文章于 2024-10-14 09:18:13 发布

阅读量3w

点赞数 10

分类专栏： vue vue及其生态圈学习文章标签： vue数组更新 Vue.set() vm.$set()

本文链接：https://blog.csdn.net/wxl1555/article/details/79616752

版权

vue及其生态圈学习同时被 2 个专栏收录

36 篇文章 8 订阅

订阅专栏

vue

26 篇文章 3 订阅

订阅专栏

欢迎访问我的个人博客：http://xiaolongwu.cn

前言

关于这个问题，官网上说的很清楚官方文档

写个例子

HTML

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

js

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；

解决方案1

 methods:{
    change(){
        this.aas[3] = 444;
        // 在vm实例上通知
        vm.$set(this.aas,3,this.aas[3])
    }
}

解决方案2

 methods:{
    change(){
        this.aas[3] = 444;
        // 在全局对象上通知
        Vue.set(this.aas,3,this.aas[3])
    }
}

解决方案3

 methods:{
    change(){
        // vue本身可以监听到数组的一些方法,例如:
        // push(),pop(),shift(),unshift(),splice(),sort(),reverse()
        this.aas.splice(3,1,"444");
    }
}