Vue的特點：響應式原理

若是問vue和react最大的區別，我以爲是響應式狀態管理！

一下內容來自vue官網，請移駕前往 https://cn.vuejs.org/v2/guide/reactivity.html

如何追蹤變化

以下面的例子，data傳遞給vue示例時，vue會遍歷該此對象的全部屬性，並使用Object.defineProperty把這些屬性所有轉爲getter/setter，在屬性被訪問和修改時通知變化

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

每一個組件實例都有相應的watcher實例對象，它會在組件渲染過程當中把屬性記錄爲依賴，以後當依賴項的setter被調用，會通知watcher從新計算，從而相關組件得以更新。

 

檢測變化注意事項

getter/setter轉換的時機：在vue實例初始化時執行，因此屬性必須在vue的data對象上存在，才能轉換它，這樣它纔是響應式的

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

// `vm.a` 是響應的

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

 

Vue 不能檢測如下變更的數組：

1. 當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
2. 當你修改數組的長度時，例如：vm.items.length = newLength

舉例：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的

 

解決第一類問題：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// 或者 
// vm.items.splice(indexOfItem, 1, newValue)

 

解決第二類問題：

vm.items.splice(newLength)

 

Vue 不能檢測對象屬性的添加和刪除：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

 

想要添加一個屬性age:

Vue.set(vm.userProfile, 'age', 27)
// 或者 vm.$set(vm.userProfile, 'age', 27)

 

想要添加多個屬性

// 錯誤的作法
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})


// 正確的作法
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

因此要避免非響應式屬性的修改，最好在vue實例建立的時候就聲明在data中，哪怕賦值爲空