Vue 原始碼(一)：響應式原理

reclay發表於2018-12-02
Vue原始碼

相關文章網上已經很多了，趁 3.0 沒出跟風打個卡

前言

本文只做簡單介紹，結合程式碼食用更佳：github/vue-learn-source-code
效果預覽：github pages

Object.defineProperty

defineProperty 讓我們可以劫持某個屬性的 getter 和 setter，舉個例子：

var person = {
    firstName: 'meimei',
    lastName: 'han'
};
Object.defineProperty(person, 'fullName', {
    get() {
        return this.lastName + ' ' + this.firstName;
    },
    set(val) {
        let arr = val.split(' ');
        this.lastName = arr[0];
        this.firstName = arr[1];
    }
});
複製程式碼

劫持 fullName 後，改變 firstName 或 lastName 會更新 fullName，反之亦然

目標

本文的目標是仿造 vue 實現改變資料後更新 dom，讓以下程式碼能夠 work：

<div id="app">
    <p>firstName: {{firstName}}</p>
    <p>lastName: {{lastName}}</p>
    <p>fullName: {{fullName}}</p>
</div>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                firstName: 'meimei',
                lastName: 'han'
            };
        },
        computed: {
            fullName: {
                get: function() {
                    return this.lastName + ' ' + this.firstName;
                },
                set: function(val) {
                    let arr = val.split(' ');
                    this.lastName = arr[0];
                    this.firstName = arr[1];
                }
            }
        }
    });
</script>
複製程式碼

觀察者模式

我們要做的是資料變化後去更新 dom，觀察者模式很適合
資料只需要收集依賴，當資料變化通知依賴更新即可，先建一個類描述這件事：

class Dep {
    constructor() {
        this.subs=[]
    }
    addSub(item) {
        this.subs.push(item);
    }
    notify() {
        this.subs.forEach(item => {
            item.update();
        });
    }
}
複製程式碼

再細想一下，dom 依賴 data，則在獲取 dom 的過程中需要用到 data 的 get，在 data get 時收集依賴即可，set data 時執行 dom 的 update
get data 時需要記錄依賴 data 的資料，給 class Dep 增加一個屬性 target 作為記錄工具，結合 defineProperty 實現如下：

Dep.target = undefined;
function defineReactive(obj, key) {
    let dep = new Dep();
    let val = obj[key];
    Object.defineProperty(obj, key, {
        get: function() {
            if (Dep.target) {
                // get 中收集依賴
                dep.addSub(Dep.target);
            }
            return val;
        },
        set: function(value) {
            val = value;
            // set 中觸發更新
            dep.notify();
        }
    })
}
複製程式碼

工具已備齊，接下來就是遍歷 data 的屬性，用 defineReactive 走一遍

data, computed, dom 的依賴關係

解析 dom 會用到 data 和 computed，computed 的 get 會用到 data

  1. 遍歷 data
function initData(vm) {
    let data = vm.$options.data;
    data = typeof data === 'function' ? data() : data;
    Object.keys(data).forEach(key => {
        defineReactive(data, key);
    });
    // 把 data 的屬性代理到 vm 例項
    proxy(data, vm);
}
複製程式碼
  1. 遍歷 computed
function initComputed(vm) {
    let computed = vm.$options.computed;
    let defaultSetter = function(key) {
        console.error(this, ' has no setter for ', key)
    }
    Object.keys(computed).forEach(key => {
        let getter = typeof computed[key] === 'function' ? computed[key] : computed[key].get;
        let setter = typeof computed[key] === 'function' ? defaultSetter.bind(computed) : computed[key].set;
        Object.defineProperty(computed, key, {
            get: getter.bind(vm),
            set: setter.bind(vm)
        })
    })
    // 把 computed 的屬性代理到 vm 例項
    proxy(computed, vm);
}
複製程式碼
  1. 解析 dom
function mount(vm) {
    let update = compile(vm);
    let watcher = new Watcher(update);
    // 把 target 標為 dom
    Dep.target = watcher;
    update();
    Dep.target = undefined;
}

function compile(vm) {
    let el = vm.$options.el;
    el = document.querySelector(el);
    vm.$el = el;
    let innerHTML = el.innerHTML;
    let getter = function() {
        return innerHTML.replace(/{{(.*?)}}/g, function() {
            // 這裡用到了 data computed 的 get，收集了依賴
            return vm[arguments[1]]
        });
    };
    let update = function() {
        let iHTML = getter();
        el.innerHTML = iHTML;
    }
    return update;
}
複製程式碼

多說一句

在收集依賴時，我們給 Dep 這個 class 增加一個屬性 target，在 vue 中還結合了 targetStack。這種收集方式稍微管理不慎就可能存在 bug，在另一篇文章有提過：熟悉 Vue ？你能解釋這個死迴圈嗎？。
為自己的填坑喝彩~

相關文章