runtime-compiler和runtime-only的区别

140 阅读1分钟

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元素 替代 #app
      //第二个参数的意义:给创建好的标签添加属性(可不传)
      //第三个参数的意义:给创建好的标签添加文本内容
      return createElement('div', { class: 'header' }, ['<span>我是h2标签</span>', createElement('button', ['按钮'])])
    */
    //高级用法 直接传入一个组件
    return createElement(cpn);
  }
})