runtime-compiler
- 解析过程
template(html结构) => ast(抽象语法树) => render(render函数) => virtual dom(虚拟dom) => 真实dom(UI)
- 特点:性能偏低/代码偏多
- 选择:保底是这个
runtime-only
- 解析过程
render(render函数) => virtual dom(虚拟dom) => 真实dom(UI)
- 特点:性能高/代码少
- 选择:知道区别用这个
- .vue文件中的template是由谁处理的?
是由 vue-template-compiler处理的
render到底是什么?
const cpn = {//定义组件
template: '<div>我是组件</div>'
}
new Vue({
el:'#app',
//template:'<App/>',
//components:{App},
render: function (createElement) {
/*基础用法
//createElement('标签名称',{标签属性},['标签的内容'])
//第一个参数的意义:根据标签名称创建dom元素 替代
//第二个参数的意义:给创建好的标签添加属性(可不传)
//第三个参数的意义:给创建好的标签添加文本内容
return createElement('div', { class: 'header' }, ['<span>我是h2标签</span>', createElement('button', ['按钮'])])
*/
//高级用法 直接传入一个组件
return createElement(cpn);
}
})