對vue雙向綁定的思考

對於數組

直接更改數組裏面的項的值是不會有view響應的，如：

<ul>
  <li v-for="item in test">
    {{ item }}
  </li>
</ul>
<button @click="test()">click</button>
    
export default {
    data () {
        return {
            test:[1,2,3]
        }
    },
    methods:{
        test(){
            this.test[0] -= 1;
        },
    }
}

你能夠經過如下方法更改數組值來使他響應

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

對於對象

在對象中的數據若是在js中被改變，他就會同時在對應的視圖層中改變。

可是這隻適用於最開始出如今data裏面的，若是是後來添加的項，並不會動態改變。

受現代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

如：

var vm = new Vue({
  data:{
  a:1
  }
})

// `vm.a` 是響應的

vm.b = 2
// `vm.b` 是非響應的

雖說有的地方是非響應的，可是若是其餘地方有視圖更新的話，那麼非響應的地方的視圖也會更新

並且若是是後來加在對象上也想使他響應的話能夠調用

Vue.set(object, key, value)

或

this.$set(object, key, value)

vue數據渲染過程

到了如今，就只有兩個問題須要深究一下

爲何監聽不到數組的變化

爲何其餘的view變化後數組之間的變化也會渲染在視圖上