Vue.js中響應(yīng)式的原理是什么

今天就跟大家聊聊有關(guān)Vue.js中響應(yīng)式的原理是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

關(guān)于Vue.js

Vue.js是一款MVVM框架，上手快速簡(jiǎn)單易用，通過(guò)響應(yīng)式在修改數(shù)據(jù)的時(shí)候更新視圖。Vue.js的響應(yīng)式原理依賴于Object.defineProperty，尤大大在Vue.js文檔中就已經(jīng)提到過(guò)，這也是Vue.js不支持E8  以及更低版本瀏覽器的原因。Vue通過(guò)設(shè)定對(duì)象屬性的 setter/getter  方法來(lái)監(jiān)聽(tīng)數(shù)據(jù)的變化，通過(guò)getter進(jìn)行依賴收集，而每個(gè)setter方法就是一個(gè)觀察者，在數(shù)據(jù)變更的時(shí)候通知訂閱者更新視圖。

將數(shù)據(jù)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();/*訂閱者收到消息的回調(diào)*/         }     }) }  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");     } })

為了便于理解，首先考慮一種最簡(jiǎn)單的情況，不考慮數(shù)組等情況，代碼如上所示。在initData中會(huì)調(diào)用observe這個(gè)函數(shù)將Vue的數(shù)據(jù)設(shè)置成observable的。當(dāng)_data數(shù)據(jù)發(fā)生改變的時(shí)候就會(huì)觸發(fā)set，對(duì)訂閱者進(jìn)行回調(diào)(在這里是render)。

那么問(wèn)題來(lái)了，需要對(duì)app._date.text操作才會(huì)觸發(fā)set。為了偷懶，我們需要一種方便的方法通過(guò)app.text直接設(shè)置就能觸發(fā)set對(duì)視圖進(jìn)行重繪。那么就需要用到代理。

代理

我們可以在Vue的構(gòu)造函數(shù)constructor中為data執(zhí)行一個(gè)代理proxy。這樣我們就把data上面的屬性代理到了vm實(shí)例上。

_proxy(options.data);/*構(gòu)造函數(shù)中*/  /*代理*/ 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;             }         })     }); }

看完上述內(nèi)容，你們對(duì)Vue.js中響應(yīng)式的原理是什么有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。