VUE学习之Vue.set 用法

最新推荐文章于 2024-07-04 09:46:22 发布

夜跑者

最新推荐文章于 2024-07-04 09:46:22 发布

阅读量391

点赞数

分类专栏： VUE学习

本文链接：https://blog.csdn.net/liubangbo/article/details/93481281

版权

VUE学习专栏收录该内容

79 篇文章 4 订阅

订阅专栏

我们知道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 改变的数组。