手寫一個超簡單的Vue

影依賢者 發表於 2021-07-27
Vue

基本結構

這裡我根據自己的理解模仿了Vue的單檔案寫法,通過給Vue.createApp傳入引數再掛載元素來實現頁面與資料的互動。

其中理解不免有錯,希望大佬輕噴。

收集資料

這裡將Vue.createApp()裡的引數叫做options

data可以是一個物件或者函式,在是函式的時候必須ruturn出一個物件,該物件裡的資料會被vm直接呼叫。

可以直接先獲取options,然後將裡面的data函式執行一次再把結果掛載到例項上,methods等物件也可以直接掛載:(這裡忽略了data是物件的情況,只按照是函式來處理)

class Vue{
    constructor() {
        this.datas = Object.create(null);
    }
    static createApp(options){
        const vm = new Vue();
        vm.datas = options.data?.call(vm);
        for (const key in options.methouds) {
            vm.methouds[key] = options.methouds[key].bind(vm);
        }
        return vm;
    }
}

當然這樣只是會獲得一個Vue例項,上面有輸入的資料,這些資料還不會與頁面發生互動。

Vue 的響應式資料

Vue的資料雙向繫結是通過代理注入來實現的,在vue2中使用Object.defineProperty而到了vue3使用的是ProxyAPI。雖然用的方法不同,但核心思想是一樣的:截獲資料的改變,然後進行頁面更新。

這樣就可以試著寫出獲得代理資料的方法:

class Vue{
    constructor() {}
    
    static createApp(options){
        const vm = new Vue();
        const data = options.data?.call(vm);
        for (const key in data) {
            vm.datas[key] = vm.ref(data[key]);
        }
        return vm;
    }
    
    reactive(data) {
        const vm = this; //! 固定VUE例項,不然下面的notify無法使用
        return new Proxy(data, {
            //todo 修改物件屬性後修改Vnode
            set(target, p, value) {
                target._isref
                    ? Reflect.set(target, "value", value)
                    : Reflect.set(target, p, value);
                
                //todo 在這裡通知,然後修改頁面
                dep.notify(vm);
                
                return true;
            },
        });
    }
    ref(data) {
        //? 基本資料型別會被包裝為物件再進行代理
        if (typeof data != "object") {
            data = {
                value: data,
                _isref: true,
                toSting() {
                    return this.value;
                },
            };
        }
        return this.reactive(data);
    }
}

現在如果data中設定的資料發生了改變,那麼就會呼叫dep.notify來改變頁面內容。

vm代理datas等資料

因為再模板裡是不會寫this.datas.xxx來呼叫資料的,這裡也可以使用代理來把datas中的資料放到vm上:

class Vue {
    constructor() {
        //! 因為vm代理了datas 以後在vm上新增新屬性會被移動到datas中,所以如果是例項上的屬性要像el一樣佔位
        this.el = "document";
        this.mountHTML = "mountHTML";
        this.datas = Object.create(null);
        this.methouds = Object.create(null);
    }
    static createApp(options) {
        //? 將data代理到vm上
        const vm = new Proxy(new Vue(), {
            get(target, p) {
                if (Reflect.get(target, p)) {
                    return Reflect.get(target, p);
                } else {
                    return target.datas[p]._isref ? target.datas[p].value : target.datas[p];
                }
            },
            set(target, p, value) {
                if (target[p]) {
                    Reflect.set(target, p, value);
                } else if (target.datas[p]?._isref) {
                    Reflect.set(target.datas[p], "value", value);
                } else {
                    Reflect.set(target.datas, p, value);
                }
                return true;
            },
        });
        //? onBeforeCreate
        options.onBeforCreate?.call(vm);
        const data = options.data?.call(vm);
        for (const key in data) {
            vm.datas[key] = vm.ref(data[key]);
        }
        for (const key in options.methouds) {
            vm.methouds[key] = options.methouds[key].bind(vm);
        }
        //? onCreated
        options.onCreated?.call(vm);
        return vm;
    }
}

這樣通過createApp獲得的Vue例項直接訪問並修改收集到的datas裡的資料。

掛載

通過Vue.createApp可以獲得一個Vue例項,這樣只需要呼叫例項中的mount方法就可以進行掛載了,在掛載後就馬上進行資料的渲染。

vm.mount接收一個引數,可以是css選擇器的字串,也可以直接是html節點:

class Vue{
    constructor() {}
    mount(el) {
        //todo 初始化
        this.init(el);
        //todo 渲染資料
        render(this);
        return this;
    }

    init(el) {
        this.el = this.getEl(el);
        this.mountHTML = this.el.innerHTML; //? 獲得掛載時元素的模板
    }

    getEl(el) {
        if (!(el instanceof Element)) {
            try {
                return document.querySelector(el);
            } catch {
                throw "沒有選中掛載元素";
            }
        } else return el;
    }
}

渲染頁面

Vue渲染頁面使用了VNode來記錄並按照它進行頁面的渲染,在每次更新資料時獲得資料更新的地方並通過diff演算法來比較舊VNode和更新資料後VNode的不同來對頁面進行渲染。

這裡不做太複雜處理,直接把掛載節點的innerHTML作為模板,通過正則進行捕獲並修改,然後渲染到頁面上,同時如果有通過@ 或 v-on繫結的事件,則按照情況進行處理:

  • 如果是原生的事件,則直接新增進去;
  • 如果是非原生的事件,則通過on來記錄,以後用emit來進行觸發。
export default function render(vm) {
    const regexp =
        /(?<tag>(?<=<)[^\/]+?(?=(>|\s)))|\{\{(\s*)(?<data>.+?)(\s*)\}\}|(?<text>(?<=>)\S+?(?=<))|(?<eName>(?<[email protected]|(v-on:))\S+?)(=")(?<event>\S+?(?="))/g;
    const fragment = document.createDocumentFragment();
    let ele = {};
    //? 每次匹配到tag就把獲得的資訊轉成標籤
    for (const result of vm.mountHTML.matchAll(regexp)) {
        if (result.groups.tag && ele.tag) {
            fragment.appendChild(createEle(vm, ele));
            ele = {};
        }
        Object.assign(ele, JSON.parse(JSON.stringify(result.groups)));
    }
    fragment.appendChild(createEle(vm, ele)); //? 最後這裡再執行一次把最後的一個元素也渲染
    ele = null;

    //? 清空原來的DOM
    vm.el.innerHTML = "";
    vm.el.appendChild(fragment);
}

//? 放入原生事件,用字典儲存,這裡只記錄了click
const OrangeEvents = { click: Symbol() };

/**
 * 根據解析的資料建立放入文件碎片的元素
 */
function createEle(vm, options) {
    const { tag, text, data, eName, event } = options;
    if (tag) {
        const ele = document.createElement(tag);
        if (data) {
            ele.innerText = getByPath(vm, data);
        }
        if (text) {
            ele.innerText = text;
        }
        if (event) {
            //todo 先判斷是不是原生事件,是就直接繫結,不然用eventBinder來註冊
            if (OrangeEvents[eName]) {
                ele.addEventListener(eName, vm.methouds[event]);
            } else {
                eventBinder.off(eName); //? 因為這裡render的實現是重新全部渲染,所以要清空對應的事件快取
                eventBinder.on(eName, vm.methouds[event].bind(vm));
            }
        }
        return ele;
    }
}

/**
 * 通過字串來訪問物件中的屬性
 */
function getByPath(obj, path) {
    const pathArr = path.split(".");
    return pathArr.reduce((result, curr) => {
        return result[curr];
    }, obj);
}

這裡的正則用了具名組匹配符,可以通過我的這篇部落格來了解。

這裡渲染函式只是進行簡單渲染,沒有考慮到字元和資料同時出現的情況,也沒有考慮標籤巢狀的問題,只能平鋪標籤。。。

註冊事件

事件註冊就是一個標準的釋出訂閱者模式的實現了,可以看看我的這篇部落格(講的並不詳細)

這裡對事件繫結進行了簡化,只保留了on off emit三個方法:

class Event {
    constructor() {
        this.collector = Object.create(null);
    }
    on(eName, cb) {
        this.collector[eName] ? this.collector[eName].push(cb) : (this.collector[eName] = [cb]);
    }
    off(eName, cb) {
        if (!(eName && cb)) {
            this.collector = Object.create(null);
        } else if (eName && !cb) {
            delete this.collector[eName];
        } else {
            this.collector[eName].splice(this.collector[eName].indexOf(cb), 0);
        }
        return this;
    }
    emit(eName, ...arg) {
        for (const cb of this.collector[eName]) {
            cb(...arg);
        }
    }
}

const eventBinder = new Event();

export { eventBinder };
export default eventBinder.emit.bind(eventBinder); //! emit會被註冊到vm上,讓它的this始終指向eventBinder

更新頁面

有了渲染函式就可以根據資料的變化來渲染頁面了,如果一次有多個資料進行修改,那麼會觸發多次渲染函式,這是明顯的效能浪費,所以引用任務佇列的概念來保證一次操作只會重新渲染一次頁面:

// Dep.js
export default class Dep {
    constructor() {
        this.lock = true;
    }

    notify(vm) {
        //? onBeforeUpdate
        //! 把更新檢視放到微任務佇列,即使多個資料改變也只渲染一次
        if (this.lock) {
            this.lock = false;
            //! 應該在這裡運用diff演算法更新DOM樹 這裡只是重新渲染一次頁面
            nextTick(render, vm);
            nextTick(() => (this.lock = true)); //? onUpdated
        }
    }
}
// nextTick.js
export default function nextTick(cb, ...arg) {
    Promise.resolve().then(() => {
        cb(...arg);
    });
}

結語

程式碼地址

說不定還會試著加入其它功能。