// 正則，?:匹配不捕獲 不捕獲當前的分組
// + 至少乙個
// ?盡可能少匹配
// 原始碼裡的模板編譯 也是基於正則的
const defaultre = /\\}/g;
export const util = ,vm)
},compilertext(node, vm) }
node.textcontent = node.textcontent.replace(
defaultre,
function (...args)
);},
};export function compiler(node, vm) else if (child.nodetype == 3)
});}
import from "./observe";
import watcher from "./observe/watcher";
import from "./util";
function vue(options)
vue.prototype._init = function (options)
};function query(el)
return el;
}vue.prototype._update = function () } 的方式來進行替換
let node = document.createdocumentfragment();
let firstchild;
while ((firstchild = el.firstchild))
compiler(node, vm);
// 需要匹配} 的方式來進行替換
// 依賴收集 屬性變化了 需要重新渲染 watcher和deep
};// 渲染頁面 將組建進行掛載
vue.prototype.$mount = function () ;
new watcher(vm, updatecomponent); //渲染watcher,缺省會呼叫updatecomponent 這個方法
};export default vue;
[1,2,3].reduce((memo,current)=>,0);
// 累加器
const defaultre = /\\}/g;// + 至少乙個
// ?盡可能少匹配
// 原始碼裡的模板編譯 也是基於正則的
'}'.match(/\\}/g);
vue模板編譯
vue 的模板編譯是在 mount的過程中進行的，在 mount 的時候執行了compile 方法來將 template 裡的內容轉換成真正的 html complie 最終生成 render 函式字串，等待呼叫。這個方法分為三步 parse解析 ast 的全稱是 abstract syntax t...
Vue模板編譯原理
將模板字串轉成element ast 通過正則去匹配生成乙個 ast 樹 例如 生成對應的ast children attrslist attrsmap children static false,expression s name 通過正則去匹配起始標籤生成對應的tag等資訊 通過乙個棧記錄乙個層...
Vue原理之模板編譯
模板內容 type text v model message div div vue指令碼 let vm new vue 複製 看到上面的 使用過vue的同學能知道頁面的渲染結果會如下圖所示 那他是如何進行渲染的呢，我們帶著問題來進入正題。class vue 複製 以上 就是對new vue時傳遞的...