vuejs中数组更新检测的问题

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000004693990

文章标签：

#javascript #ViewUI

本文通过实例探讨了Vue.js在处理数组更新时的行为差异。点击按钮修改数组元素时，直接赋值不会触发视图更新，而使用splice方法则可以。这揭示了Vue.js对数组变更的监听机制。

最近在尝试用Vuejs重构公司的现有业务代码，组件化的设计思路和MVVM的思想让我深深沉迷于其中。But还是踩到了不少坑，就比如今天遇到的数组绑定后的更新检测。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="one in arr">
                    {{one}}
                </li>
            </ul>
            <button @click="foo">foo</button>
            <button @click="bar">bar</button>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:function() {
                return {
                    arr:[1,2,3,4,5]
                }
            },
            methods:{
                foo:function(){
                    this.arr[1] = 10;
                },
                bar:function(){
                    this.arr.splice(1,1,10);
                }
            }
        })
    </script>
    </html>

在点击第一个按钮时，数组第二个元素会变成10，但是视图中并不会显示出来变化，还是2.点击第二个按钮后视图上才显示出来，说明vuejs对于数组的检测并没有深入到每一个元素中去，数组长度变化后才会在视图中更新。