五分鐘看懂vue原理（一）

Vue響應式原理

學習筆記-

第一步、将date資料變成可觀察的（observable）;

怎麼實作了，主要是利用的對象的 defineProperty屬性！

• 周遊對象，将對象的每個屬性變成可觀察的

function observe(data, callback) {
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key], callback)
    })
}

function defineReactive(obj, key, data[key], callback) {
    Object.defineProperty(obj, key, {
        enumerable: true, //屬性的可枚舉性，for in是否能夠周遊到
        configurable: true, // 表示能否通過delete删除屬性進而重新定義屬性
        get: function() {
            // 第一次執行`render`的時候進行收集，詳見下一章
        },
        set: function(newVal) {
            callback() //回調執行render重新整理視圖
        }
    })
}
複制代碼
           

• 建立vue構造函數

class Vue {
    // 建立vue執行個體時将options中data指向了vue的執行個體， 即在VM執行個體上挂在了一個 `_data`屬性;
    // 初始化調用了observe
    constructor(options) {
        this._data = options.data; // this指向執行個體
        observe(this._data, options.render)
    }
}
複制代碼
           

• 建立執行個體

let app = new Vue({
    el: '#app',
    data: {
        text1: '1',
        text2: '2',
    },
    render() {
        console.log('render')
    }
})

複制代碼
           

上面的方法就簡單的實作了将vue裡面的data資料變成可觀察的模式；如果改變了data裡面屬性的值就會觸發對象的set， 進而觸發訂閱者的回調函數（如重新整理視圖）

本文參考學習資料: answershuto 的響應式原理

轉載于:https://juejin.im/post/5b3f2d7c6fb9a04f86060ec6