Vue.js中響應式的原理是什么

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

關于Vue.js

Vue.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;             }         })     }); }

看完上述內容，你們對Vue.js中響應式的原理是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。