Vue数据监测-数组（data中数组数据的修改）

最新推荐文章于 2024-05-16 09:13:38 发布

少年夏之秋

最新推荐文章于 2024-05-16 09:13:38 发布

阅读量1.1k

点赞数 2

分类专栏： web 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_41809961/article/details/129105300

版权

web 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

故事

在听B站课程并练习的时候发现这样一个小问题，

就像Vue的官方文档中所说的那样，对于数组，Vue只监测数组的七个方法

现在我们在data中声明了这样的一个数组，并在界面上展示

data() {
    return {
        actors:[
        { name:"Orion",sex:"Male" },
        { name:"Nancy",sex:"Female" }
        ] 
    }
}

当你想要修改这个列表的数据，并在控制台中用

vm._data.actors[1] = {name:"Chang",sex:"Male"}

或者在methods的update按钮点击事件中用

this.actors[1] = {name:"Chang",sex:"Male"}

去修改它的时候，你会发现其并未发生响应式的变化。

但是如果你恰好在update事件中修改了其他data中对象的数据，比如下面代码中的

this.roles.ro2 = "Penelop"

那么页面就会重新渲染，我们上面对列表的操作也随之更新到页面上。这对于初学者来说是具有迷惑性的。不过尽管如此，这也为数组中的数据进行响应式的更新提供了一种方法。

方法

针对更新数组数据的情况，我们还可以用以下的方法：

1.依次更新数组元素的属性

this.actors[1].name = "Change"
this.actors[1].sex = "Male"

2.通过Vue.set方法

Vue.set(this.actors,1,{name:"Chang",sex:"Male"})

没错 set方法是可以用到数组上的

代码

下面晒出完整的代码

<body>
    <div id="app">
        <h1>{{ game }}</h1>
        <h2>{{ author }}</h2>
        <h3>Roles</h3>
        <ul v-for="role in roles">
            <li>😀{{ role }} </li>
        </ul>
        <h3>Actor</h3>
        <ul v-for="actor in actors">
            <li>😎{{actor.name}}</li>
        </ul>
        <button @click="update">Update</button>
        <!-- 注意 v-for 是可以用于数组或者对象的 -->
        
    </div>
    
    <!-- Vue时如何检测数据的改变的 -->
    <script type="text/javascript" src="../1.Hello/js/vue.js"></script>
    <script>
        const vm = new Vue({
            data() {
                return {
                    game:"Eternum",
                    author:"Caribdis",
                    roles:{
                        ro1:"Orion",
                        ro2:"Annie"
                    },
                    actors:[
                        { name:"Orion",sex:"Male" },
                        { name:"Nancy",sex:"Female" }
                    ]
                }
            },
            methods: {
                // 当你在控制台中输入vm._data.modules.tl[0]="Janpanese"的时候 
                // 页面上的展示没有即时响应 就像下面最后这一句的赋值一样  
                // 但是如果你调用了第一句 或者是 vm._data.actors[0].name="Penelope"的时候 整个页面都会刷新  
                // 总结  只要是调用了 data中数据中任意的一个set 方法（不管嵌套了几层） 都会引起整个页面的更新
                update(){
                    // this.roles.ro2 = "Penelop"
                    // 在控制台用这个 vm._data.musics[1] = "Kill the light" 为什么和下面的不一样
                    
                    // this.actors[1].name = 'Chang'
                    this.actors[1] = {name:"Chang",sex:"Male"}
                },
                
            },


        })
        vm.$mount("#app")
    </script>
</body>

下面附上课程链接

【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=37&share_source=copy_web&vd_source=e81bc160f47d30536ffff3ff80075529