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

相關標籤/搜索