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);  //包装成函数 实现模板引擎