1. 程式人生 > >Vue 原始碼(一):響應式原理

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 ?你能解釋這個死迴圈嗎?
為自己的填坑喝彩~