vue模板實現原理

理解：將模板轉化爲ast語法樹，語法樹再通過generate(代碼鍵)轉化爲render函數，通過watcher監測，當屬性發生變化時會調用render函數生成VNode對象，vnode通過createElement方法生成虛擬dom,再通過path方法，DOM Diff算法渲染成真實的dom.

function baseCompile ( 
template: string, 
options: CompilerOptions 
) {
const ast = parse(template.trim(), options) // 1.將模板轉化成ast語法樹 
if (options.optimize !== false) { // 2.優化樹 
optimize(ast, options) 
}
const code = generate(ast, options) // 3.生成樹 
return { 
ast, 
render: code.render, 
staticRenderFns: code.staticRenderFns 
} 
})

模板引擎實現原理：首先用一個with給他包起來，再通過一個new Function()來實現模板引擎

let code=generate(root);
let render=`with(this){return ${code}}`；//with 會不安全，可以給我們解決作用域問題
Let renderFn=new Function(render);  //包裝成函數 實現模板引擎