runtime-compiler 和 runtime-only的区别

一.看图,查看代码区别

二.如图,进行分析

(1)runtime-compiler和runtime-only的执行步骤

runtime-compiler: teplate -> ast -> render ->vdom ->UI

runtime-only : render ->vdom -> UI

结论: runtime-only 1.性能更多 2. 代码量更多

推荐:以后工作在创建 vue项目时都要选 runtime-only这个模式

语言描述: template 解构为 ast(抽象语法树) 编译为 render函数形成为虚拟dom 最后转为 UI

三.通过修改runtime-compiler模式下的 main.js 来理解

main.js修改前

import Vue from 'vue'
import App from './App'
import router from './router'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.js修改后

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
 
Vue.config.productionTip = false;console.log(App)   //zmztya
const cpn = {
  template: "<div>我是组件</div>",
  data() {
    return {
      message: "测试"
    };
  }
};
 
/* eslint-disable no-new */
new Vue({
  el: "#app",
  // router,
  // components: { App },
  // template: '<App/>'  //这里的template的 App组件是会替换 <div id="#app"></div> 这个标签
  render: function(createElement) {
    //有另一种名字为 h
 
    //第一种:普通用法
    //1.createElement('标签',{标签的属性},[标签的内容])  //标签属性这个部分是可以不用写的
    //return createElement("h2", { class: "box" }, ["这是测试内容"]); //这里的内容会替换 el:#app即index.html 中 <div id="#app"></div>这个标签 被替换为 h2
    // return createElement("h2", ["h2内容", createElement("button", ["点击"])]); //h2内部多了一个按钮内容
 
    //第二种:这里还可以使用组件
    return createElement(cpn); //分析:render函数是没有使用template的   思考:为什么App中有template,cpn有template,这里面明明有template,为什么说是没有使用呢?   因为这里的template是在编译的时候就已经渲染成了render函数,如何去查看呢?     在该文件中 标注了 //zmztya的地方打印出来,是一个对象,这个对象有render,而不是 template
  }
});