VUE学习之Vue.set 用法

最新推荐文章于 2025-07-25 10:14:34 发布

夜跑者

最新推荐文章于 2025-07-25 10:14:34 发布

阅读量431

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE学习

本文链接：https://blog.youkuaiyun.com/liubangbo/article/details/93481281

VUE学习专栏收录该内容

80 篇文章

订阅专栏

博客介绍了在Vue中，当data里的数据为数组时，用索引改变数组值数据不会动态更新，而使用Vue全局方法Vue.set或数组的splice方法可使页面动态跟随数据变化，且查看Vue.set源代码可知，其对数组操作实际也是用splice。

我们知道vue data里面的数据为数组时，如果我们用索引改变数组的值，则数据不会动态更新。但我们用Vue 全局方法Vue.set 更改此数组时，就可以动态更新数据。 demo如下：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>vue demo</title>

</head>


<body>

<script src="./vue.js"></script>

<div id="app">
    <ul>
        <li v-for = 'item in listData'>{{item}}</li>
    </ul>
    <button @click="changeData">change data</button>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            listData: ["first", "second", "third"]
        },
        methods:{
            changeData () {
                console.log("change data");
                this.listData[0] = "First";
                //Vue.set(this.listData[0], 0, "First");
                //this.listData.splice(0, 1, "First");
                console.log("change data after: " + this.listData);
            }
        }
    })
    
</script>

</body>
</html>


在上面的例子中我们用v-for渲染出数组中的数据，但我们用this.listData[0] = "First"; 改变数据时，页面并没有随着变化。

但我们用Vue.set(this.listData[0], 0, "First"); 或 this.listData.splice(0, 1, "First"); 都可以使页面动态跟随数据变化。

看Vue.set源代码可以看到，当Vue.set中的第一个参数为数组时，其实也是用splice 改变的数组。