響應式基本原理就是，在初始化vue實例的時候，對data的每一個屬性都通過 Object.defineProperty 定義一次，在數據被set的時候，做一些操作，改變相應的視圖 ...
Vue.js 基本上遵循 MVVM（Model–View–ViewModel）架構模式，數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。 本文講解一下 Vue 響應式系統的底層細節。
檢測變化註意事項
Vue 2.0中，是基於 Object.defineProperty 實現的響應式系統 （這個方法是 ES5 中一個無法 shim 的特性，這也就是 Vue 不支持 IE8 以及更低版本瀏覽器的原因）
vue3 中，是基於 Proxy/Reflect 來實現的
- 由於 JavaScript 的限制，這個 Object.defineProperty() api 沒辦法監聽數組長度的變化，也不能檢測數組和對象的新增變化。
- Vue 無法檢測通過數組索引直接改變數組項的操作，這不是 Object.defineProperty() api 的原因，而是尤大認為性能消耗與帶來的用戶體驗不成正比。對數組進行響應式檢測會帶來很大的性能消耗，因為數組項可能會大，比如1000條、10000條。
響應式原理
響應式基本原理就是，在 Vue 的構造函數中，對 options 的 data 進行處理。即在初始化vue實例的時候，對data、props等對象的每一個屬性都通過 Object.defineProperty 定義一次，在數據被set的時候，做一些操作，改變相應的視圖。
數據觀測
讓我們基於 Object.defineProperty 來實現一下對數組和對象的劫持。
import { newArrayProto } from './array'
class Observer {
constructor(data){
if (Array.isArray(data)) {
// 這裡我們可以重寫可以修改數組本身的方法 7個方法，切片編程：需要保留數組原有的特性，並且可以重寫部分方法
data.__proto__ = newArrayProto
this.observeArray(data) // 如果數組中放的是對象 可以監控到對象的變化
} else {
this.walk(data)
}
}
// 迴圈對象"重新定義屬性",對屬性依次劫持，性能差
walk(data) {
Object.keys(data).forEach(key => defineReactive(data, key, data[key]))
}
// 觀測數組
observeArray(data) {
data.forEach(item => observe(item))
}
}
function defineReactive(data,key,value){
observe(value) // 深度屬性劫持，對所有的對象都進行屬性劫持
Object.defineProperty(data,key,{
get(){
return value
},
set(newValue){
if(newValue == value) return
observe(newValue) // 修改屬性之後重新觀測，目的：新值為對象或數組的話，可以劫持其數據
value = newValue
}
})
}
export function observe(data) {
// 只對對象進行劫持
if(typeof data !== 'object' || data == null){
return
}
return new Observer(data)
}
重寫數組7個變異方法
7個方法是指：push、pop、shift、unshift、sort、reverse、splice。（這七個都是會改變原數組的）
實現思路：面向切片編程！！！
不是直接粗暴重寫 Array.prototype 上的方法，而是通過原型鏈繼承與函數劫持進行的移花接木。
利用 Object.create(Array.prototype) 生成一個新的對象 newArrayProto，該對象的 __proto__指向 Array.prototype，然後將我們數組的 __proto__指向擁有重寫方法的新對象 newArrayProto，這樣就保證了 newArrayProto 和 Array.prototype 都在數組的原型鏈上。
arr.__proto__ === newArrayProto；newArrayProto.__proto__ === Array.prototype
然後在重寫方法的內部使用 Array.prototype.push.call 調用原來的方法，並對新增數據進行劫持觀測。
let oldArrayProto = Array.prototype // 獲取數組的原型
export let newArrayProto = Object.create(oldArrayProto)
// 找到所有的變異方法
let methods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice']
methods.forEach(method => {
// 這裡重寫了數組的方法
newArrayProto[method] = function (...args) {
// args reset參數收集，args為真正數組，arguments為偽數組
const result = oldArrayProto[method].call(this, ...args) // 內部調用原來的方法，函數的劫持，切片編程
// 我們需要對新增的數據再次進行劫持
let inserted
let ob = this.__ob__
switch (method) {
case 'push':
case 'unshift': // arr.unshift(1,2,3)
inserted = args
break
case 'splice': // arr.splice(0,1,{a:1},{a:1})
inserted = args.slice(2)
default:
break
}
if (inserted) {
// 對新增的內容再次進行觀測
ob.observeArray(inserted)
}
return result
}
})
增加__ob__屬性
這是一個噁心又巧妙的屬性，我們在 Observer 類內部，把 this 實例添加到了響應式數據上。相當於給所有響應式數據增加了一個標識，並且可以在響應式數據上獲取 Observer 實例上的方法
class Observer {
constructor(data) {
// data.__ob__ = this // 給數據加了一個標識 如果數據上有__ob__ 則說明這個屬性被觀測過了
Object.defineProperty(data, '__ob__', {
value: this,
enumerable: false, // 將__ob__ 變成不可枚舉 （迴圈的時候無法獲取到，防止棧溢出）
})
if (Array.isArray(data)) {
// 這裡我們可以重寫可以修改數組本身的方法 7個方法，切片編程：需要保留數組原有的特性，並且可以重寫部分方法
data.__proto__ = newArrayProto
this.observeArray(data) // 如果數組中放的是對象 可以監控到對象的變化
} else {
this.walk(data)
}
}
}
__ob__有兩大用處：
- 如果一個對象被劫持過了，那就不需要再被劫持了，要判斷一個對象是否被劫持過，可以通過__ob__來判斷
// 數據觀測
export function observe(data) {
// 只對對象進行劫持
if (typeof data !== 'object' || data == null) {
return
}
// 如果一個對象被劫持過了，那就不需要再被劫持了 (要判斷一個對象是否被劫持過，可以在對象上增添一個實例，用實例的原型鏈來判斷是否被劫持過)
if (data.__ob__ instanceof Observer) {
return data.__ob__
}
return new Observer(data)
}
- 我們重寫了數組的7個變異方法，其中 push、unshift、splice 這三個方法會給數組新增成員。此時需要對新增的成員再次進行觀測，可以通過__ob__調用 Observer 實例上的 observeArray 方法
