vue容易混淆的點小記

computed、methods及watch函數的差別

computed：基於依賴進行緩存，若依賴不變，則直接調用緩存（適用於性能開銷比較大的時候）

methods: 無論數據是否變動，都會進行計算（適用於不須要緩存的時候）

watch: 跟computed有殊途同歸之妙，不一樣的是，其能夠設置中間狀態（適用於當數據發生變化時執行異步或者開銷較大的操做）

 

數組更新檢測

因爲js限制，Vue不能檢測一下變更的數組：

1.經過索引直接設置一個項，如：vm.items[index] = newValue;

解決方法一：Vue.set(vm.items, index, newValue);

解決方法二：vm.$set(vm.items, index, newValue);   【vm.$set實例方法是全局方法Vue.set的別名】

解決方法三：vm.items.splice(index, 1,  newValue);

2.修改數組長度，如：vm.items.length = newLen;

解決方法：vm.items.splice(newLen);

 

對象更新檢測

一樣因爲js限制，Vue不能檢測對象屬性的添加或刪除

如：var vm = new Vue({

data: {

userInfo:  {

name: '淼淼'

} 

}

})

vm.userInfo.age = 26  // 非響應式，故添加無效

//解決方法一

Vue.set(vm.userInfo, 'age', 26)

//解決方法二

vm.$set(vm.userInfo, 'gender', 'female')

// 添加屬性對象

vm.userInfo = Object.assign({}, vm.userInfo, {

'addr': '成都'，

'hobby': '閱讀'

})