Vue.js響應式原理

標籤：

本文和大家分享的主要是Vue.js 響應式原理相關內容，一起來看看吧，希望對大家 學習Vue.js有所協助。 關於Vue.jsVue.js 是一款 MVVM 架構，上手快速簡單易用，通過響應式在修改資料的時候更新視圖。 Vue.js 的響應式原理依賴於 Object.defineProperty  ，尤大大在Vue.js 文檔中就已經提到過，這也是 Vue.js 不支援 E8 以及更低版本瀏覽器的原因。 Vue 通過設定對象屬性的  setter/getter  方法來監聽資料的變化，通過 getter 進行依賴收集，而每個 setter 方法就是一個觀察者，在資料變更的時候通知訂閱者更新視圖。 將資料data變成可觀察（observable）的那麼Vue 是如何將所有 data 下面的所有屬性變成可觀察的（ observable ）呢？ function  observer(value) {Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))} function  defineReactive (obj, key, val, cb) {Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: ()=>{/*.... 依賴收集等 ....*/},set:newVal=> {cb();/* 訂閱者收到訊息的回調 */}})} class  Vue { constructor(options) { this._data = options.data;observer( this._data, options.render)}} let app =  new Vue({el: ’#app’,data: {text: ’text’,text2: ’text2’},render(){console.log("render");}})為了便於理解，首先考慮一種最簡單的情況，不考慮數組等情況，代碼如上所示。在  initData 中會調用  observe  這個函數將Vue 的資料設定成 observable 的。當 _data 資料發生改變的時候就會觸發 set ，對訂閱者進行回調（在這裡是 render ）。那麼問題來了，需要對app._date.text 操作才會觸發 set 。為了偷懶，我們需要一種方便的方法通過app.text 直接設定就能觸發 set 對視圖進行重繪。那麼就需要用到代理。 代理我們可以在Vue 的建構函式 constructor 中為 data 執行一個代理  proxy  。這樣我們就把data 上面的屬性代理到了 vm 執行個體上。_proxy(options.data);/* 建構函式中 *//* 代理 */ function  _proxy (data) { const that =  this;Object.keys(data).forEach(key => {Object.defineProperty(that, key, {configurable: true,enumerable: true,get:  function  proxyGetter () { return that._data[key];},set:  function  proxySetter (val) {that._data[key] = val;}})});}我們就可以用app.text 代替 app._data.text 了。 .js來源： 稀土掘金

Vue.js響應式原理