基本結構
這裡我根據自己的理解模仿了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>(?<=@|(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);
});
}
結語
說不定還會試著加入其它功能。