在資料變化的時候，檢視也會隨著改變，這就是響應式
vue使用object.defineproperty 中getter和setter方法中的觀察者模式來實現響應式
這個方法是物件方法，在乙個物件上定義一些新的屬性及方法，或改變物件的現有方法，並返回這個物件。
舉個示例看一下：
var mval =0;
var o =
;object.
defineproperty
(o,'m'),
set:
function
(newval),
enumerable :
true
, configurable :
true
}o.m =88;
console.
log(o.m)
;// 88
通過這種方式我們就可以實現乙個簡單的vue雙向繫結了，給data中的所有屬性加上get和set方法。
什麼是觀察者模式？
觀察者模式分為註冊環節與發布環節。
將需要修改的屬性集中註冊一下，當處理完後一起發布出去。
function
observer()
notify()
}依次註冊多個想要執行的函式
const wantcake =
newobserver()
;wantcake.
register
(console.
log(
'call dish'))
;wantcake.
register
(console.
log(
'call jaks'))
;wantcake.
register
(console.
log(
'call mejdh'))
;在完成後通知所有客戶並執行函式
wantcake.
notify
()
首先參考一張原理圖
我們分3個步驟來解釋
1、init階段，vue例項的data屬性reactive化，加上get、set方法
function
definereactive
(obj: object, key: string,
...)
,set
:function
reactivesetter
(newval),
enumerable :
true
, configurable :
true}}
const dep
}notify()
}}
2、mount階段
mountcomponent
(vm: component, el:
?element,
...)
newwatcher
(vm, updatecomponent,
...)
...}
class
watcher
}
在new watcher()時會呼叫元件的getter方法，此時會呼叫render重新渲染函式。
render函式會訪問data屬性，這時就去呼叫這個屬性的getter函式
// getter函式
get:
function
reactivegetter()
,// dep的depend函式
depend()
}
在收集完所有的依賴後，如果這個屬性變化，就會通知watcher去更新相關的元件。
3、更新階段
屬性改變時，回去呼叫dep裡面的notify函式，然後通知所有的watcher去呼叫update函式進行更新。
notify()
}
setter
depnotify
watcher
re-render
vuecomponent
5、總結一下
第一步：元件初始化時給data中所有屬性新增get、set，reactive化；然後註冊乙個watcher物件，此時watcher會立即呼叫元件裡的render去生成虛擬dom，此時會用到data，所以會觸發getter函式，將當前的watcher註冊到sub裡。
第二步：在data屬性變化時，會遍歷sub中所有watcher物件，通知它們去渲染元件。
借鑑文章：
vue響應式布局 Vue 響應式原理
vue2 的資料偵測 在 src observer 目錄裡面，元件例項在初始化時，會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法，從而讓 data 變成可響應...
vue響應式原理
響應式系統是vue框架核心的部分，資料物件僅僅是普通的 js物件。當我們改變資料時，檢視也會被改變，本文就來 一下vue 的響應式原理。vue響應式的核心是使用了es5 新增的api object.defineproperty 因此vue不支援ie8 object.defineproperty的作用...
vue響應式原理
要了解響應式原理首先應該知道什麼是響應式 更改 vue的響應式原理是什麼 vue資料的雙向繫結是通過資料劫持結合發布訂閱模式，偵測到資料變化，然後通過object.defineproperty 物件對每個屬性的getter和setter進行劫持。當讀取 data 中的資料時自動呼叫 get 方法，當...