Vue.js 基本上遵循 MVVM（Model–View–ViewModel）架構模式，資料模型僅僅是普通的 JavaScript 物件。而當你修改它們時，檢視會進行更新。 本文講解一下 Vue 響應式系統的底層細節。
Vue 2.0中，是基於 Object.defineProperty 實現的響應式系統 （這個方法是 ES5 中一個無法 shim 的特性，這也就是 Vue 不支援 IE8 以及更低版本瀏覽器的原因）
vue3 中，是基於 Proxy/Reflect 來實現的
響應式基本原理就是，在 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個方法是指：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
}
})
這是一個噁心又巧妙的屬性，我們在 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__有兩大用處：
// 資料觀測
export function observe(data) {
// 只對物件進行劫持
if (typeof data !== 'object' || data == null) {
return
}
// 如果一個物件被劫持過了，那就不需要再被劫持了 (要判斷一個物件是否被劫持過，可以在物件上增添一個範例，用範例的原型鏈來判斷是否被劫持過)
if (data.__ob__ instanceof Observer) {
return data.__ob__
}
return new Observer(data)
}