vue深刻響應式式原理——對象 數組

vue深刻響應式式原理

1.在vue初始化實例的時候，data選項的理解

1.1 把一個普通 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter。Object.defineProperty 是僅 ES5 支持，且沒法 shim 的特性，這也就是爲何 Vue 不支持 IE8 以及更低版本瀏覽器的緣由。

1.2 用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這裏須要注意的問題是瀏覽器控制檯在打印數據對象時 getter/setter 的格式化並不一樣，因此你可能須要安裝 vue-devtools 來獲取更加友好的檢查接口。

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

2.對象

2.1 因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的：

var vm = new Vue({
  data:{
  a:1
  }
})
// `vm.a` 是響應的
vm.b = 2
// `vm.b` 是非響應的

2.2 Vue 不容許在已經建立的實例上
動態添加新的根級響應式屬性(root-level reactive property)。
然而它能夠使用 Vue.set(object, key, value) 方法將
響應屬性
添加到嵌套的對象上：

Vue.set(vm.someObject, 'b', 2)

您還能夠使用 vm.$set 實例方法，這也是全局 Vue.set 方法的別名：

this.$set(this.someObject,'b',2)

2.3 有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。可是，添加到對象上的新屬性不會觸發更新。在這種狀況下能夠建立一個新的對象，讓它包含原對象的屬性和新的屬性：

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

3.數組

3.1 能夠實現動態響應的變異方法
變異方法(mutation method)，顧名思義，會改變被這些方法調用的原始數組

Vue 包含一組觀察數組的變異方法，因此它們也將會
觸發視圖更新
這些方法以下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

3.2 重塑數組
filter(), concat(), slice() 。這些不會改變原始數組，但老是返回一個新數組。當使用非變異方法時，能夠用新數組替換舊數組：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

3.3 因爲 JavaScript 的限制， Vue 不能檢測如下變更的數組：

3.3.1 當你利用索引直接設置一個項時，
例如： vm.items[indexOfItem] = newValue
如下兩種方式均可以實現和 vm.items[indexOfItem] = newValue 相同的效果， 
同時也將觸發狀態更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

3.3.2  當你修改數組的長度時，例如： vm.items.length = newLength

example1.items.splice(newLength)

3.4 顯示過濾/排序結果

有時，咱們想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據。在這種狀況下，能夠建立返回過濾或排序數組的計算屬性。

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

你也能夠在計算屬性不適用的狀況下 (例如，在嵌套 v-for 循環中) 使用 method 方法：

<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}