今天在研究另外一個學友的問題（https://segmentfault.com/q/10...）時，發(fā)現(xiàn)一個問題，就是關(guān)于computed的使用問題。

首先相同的一段聲明VUE的代碼如下：

var valPlus = new Vue({
    el: '.valPlus',
    data: {
        data_level_1: {
            name: '1',
            level: 1,
            value: null,
            children: this.data_arr_1
        },
        data_arr_1: [
            {
                name: '1-1',
                level: 2,
                value: null,
                children: this.data_arr_2_1
            },
            {
                name: '1-2',
                level: 2,
                value: null,
                children: this.data_arr_2_2
            }
        ],
        data_arr_2_1: [
            {
                name: '1-1-1',
                level: 3,
                value: 12,
            },
            {
                name: '1-1-1',
                level: 3,
                value: 24
            }
        ],
        data_arr_2_2: [
            {
                name: '1-2-1',
                level: 3,
                value: 122,
            },
            {
                name: '1-2-2',
                level: 3,
                value: 242
            }
        ]
    },
    computed: {
        data_level_3_val_1: function (){
            var res = 0
            for (var i = 0; i < this.data_arr_2_1.length; i++) {
                res = res + this.data_arr_2_1[i].value
            }
            this.data_arr_1[0].value = res
            return res
        },
        data_level_3_val_2: function (){
            var res = 0
            for (var i = 0; i < this.data_arr_2_2.length; i++) {
                res = res + this.data_arr_2_2[i].value
            }
            this.data_arr_1[1].value = res
            return res
        },
        data_level_2_val: function (){
            var res = 0
            for (var i = 0; i < this.data_arr_1.length; i++) {
                res = res + this.data_arr_1[i].value
            }
            this.data_level_1.value = res
            return res
        }
    }
})

<div class="valPlus">
    <p>data_arr_1[0].value:{{data_arr_1[0].value}}</p>    
    <p>data_level_3_val_1:{{data_level_3_val_1}}</p>    
    <p>data_arr_1[1].value:{{data_arr_1[1].value}}</p>    
    <p>data_level_3_val_2:{{data_level_3_val_2}}</p>    
</div>

上述代碼顯示效果為

data_arr_1[0].value:36

data_level_3_val_1:36

data_arr_1[1].value:364

data_level_3_val_2:364

而注釋掉computed計算的結(jié)果后：

<div class="valPlus">
    <p>data_arr_1[0].value:{{data_arr_1[0].value}}</p>
    <!-- <p>data_level_3_val_1:{{data_level_3_val_1}}</p> -->
    <p>data_arr_1[1].value:{{data_arr_1[1].value}}</p>
    <!-- <p>data_level_3_val_2:{{data_level_3_val_2}}</p> -->
</div>

顯示效果為：

data_arr_1[0].value:

data_arr_1[1].value:

可以看到，當頁面綁定了computed的計算值，data里面的數(shù)據(jù)同樣有顯示；當頁面不綁定computed的計算值時，data中的數(shù)據(jù)就沒有了。

個人得出的結(jié)論是：computed作為對data中數(shù)據(jù)的運算，需要頁面的數(shù)據(jù)綁定才會執(zhí)行對應的函數(shù)。如果不綁定，computed是不會運作的。
對vue的運行原理不太清除，更不知道上述結(jié)論是否正確，請大神指點一下。
如果想使用computed對data中的數(shù)據(jù)進行計算綁定，該如何實現(xiàn)？