## 響應式原理 ### 如何追蹤變化 * Object.defineProperty ~~~ var obj = {}; var initValue = 'hello'; Object.defineProperty(obj,"newKey",{ get:function (){ //當獲取值的時候觸發的函數 return initValue; }, set:function (value){ //當設置值的時候觸發的函數,設置的新值通過參數value拿到 initValue = value; } }); //獲取值 console.log( obj.newKey ); //hello //設置值 obj.newKey = 'change value'; console.log( obj.newKey ); //change value ~~~ 當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器 ### 異步更新隊列 可能你還沒有注意到，Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環“tick”中，Vue 刷新隊列并執行實際 (已去重的) 工作 Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel，如果執行環境不支持，會采用 setTimeout(fn, 0) 代替。 ~~~ <div id="example">{{message}}</div> ~~~ ~~~ var vm = new Vue({ el: '#example', data: { message: '123' } }) vm.message = 'new message' // 更改數據 vm.$el.textContent === 'new message' // false Vue.nextTick(function () { vm.$el.textContent === 'new message' // true }) ~~~ ### 數組更新檢測 2.替換數組 變異方法 (mutation method)，顧名思義，會改變被這些方法調用的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組： ~~~ example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) ~~~ 3.注意事項 由于 JavaScript 的限制，Vue 不能檢測以下變動的數組 ~~~ var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的 ~~~ 為了解決第一類問題，以下兩種方式都可以實現和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發狀態更新： ~~~ // Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) ~~~ 你也可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名 ~~~ vm.$set(vm.items, indexOfItem, newValue) ~~~ 或者使用變異方法 push() pop() shift() unshift() splice() sort() reverse() 對于已經創建的實例，Vue 不能動態添加根級別的響應式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。例如，對于： ~~~ var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) ~~~ 你可以添加一個新的 age 屬性到嵌套的 userProfile 對象 ~~~ Vue.set(vm.userProfile, 'age', 27) ~~~ 有時你可能需要為已有對象賦予多個新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣： ~~~ vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) ~~~ ### 課后習題 1.vue響應原理主要依賴的哪個函數？ 2.vue中如何讓數組改變元素頁面也能夠響應 3.vue中nextTick的使用場景是什么？