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修改前

1
2
3
4
5
6
7
8
9
10
11
12
13
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修改后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 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
  }
});

 

  扩展: :

1.   .vue文件中的template 是由谁处理的呢?

    是由 vue-template-compiler处理的

  

  

 

posted @   zmztyas  阅读(151)  评论(0编辑  收藏  举报
编辑推荐:
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Huawei LiteOS基于Cortex-M4 GD32F4平台移植
· mysql8.0无备份通过idb文件恢复数据过程、idb文件修复和tablespace id不一致处
点击右上角即可分享
微信分享提示