1. 程式人生 > >computed 計算屬性無法雙向繫結

computed 計算屬性無法雙向繫結

v-model 這種雙向資料繫結最好不要放在計算屬性上,因為計算屬性本來就響應依賴其他的東西,
雙向繫結感覺會破壞它的原有機制

重新編輯一下,剛剛研究了一下,可能不是很透徹
實現你說的那種,需要加一箇中間的依賴屬性,為什麼呢,我是這樣理解的
computed裡的return,實際上是一個get方法,
就是每次vm.someComputed或者頁面相應變化的時候{{someComputed}},實際上訪問的是它的get方法
如果只有return的話,是無法實現雙向資料繫結的,因為並沒有set資料啊,
這樣永遠獲得的都是return裡面的值,如果響應依賴的話就get依賴進行運算的值,如果是個常量就會一直返回常量
我們可以增加一個可以做中轉的依賴屬性,重寫計算屬性的set和get方法,這樣就能實現計算屬性

的雙向繫結

new Vue({
    el: '.app',
    data: {
        foo: 'test',
    },
    computed: {
        _foo: {
            set: function(value) {
                this.foo = value;
            },
            get: function() {
                return this.foo
            }
        }
    }
})

這樣的本質其實還是foo在發生改變,但是當你在input

上寫v-model繫結_foo的時候,
看起來就好像計算屬性_foo和dom實現了資料繫結