五分鐘看懂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 的響應式原理