關于Vue.js的響應式原理
寫在前面
因為對Vue.js很感興趣,而且平時工作的技術棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,并做了總結與輸出。
文章的原地址:https://github.com/answershuto/learnVue。
在學習過程中,為Vue加上了中文的注釋https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以對其他想學習Vue源碼的小伙伴有所幫助。
可能會有理解存在偏差的地方,歡迎提issue指出,共同學習,共同進步。
關于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;
- }
- })
- });
- }
我們就可以用app.text代替app._data.text了。






























