vuejs中数组更新检测的问题

时间 2019-12-10

标签 vuejs 数组更新检测问题繁體版

原文原文链接

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

<!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对于数组的检测并无深刻到每个元素中去，数组长度变化后才会在视图中更新。vue