runtime-compiler 和 runtime-only的区别
时间:2021-02-23
本文章向大家介绍runtime-compiler 和 runtime-only的区别,主要包括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
} });
扩展: :
1. .vue文件中的template 是由谁处理的呢?
是由 vue-template-compiler处理的
原文地址:https://www.cnblogs.com/zmztya/p/14437590.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Dell R730服务器6i阵列卡Raid5配置方法(热备)
- Spring Boot中实现定时任务应用实践
- Spring-boot结合Shrio实现JWT的方法
- Java微信支付之关闭订单
- C++中的六个函数
- C++常见获取随机数的方法小结
- python通过伪装头部数据抵抗反爬虫的实例
- 详解JavaScript的BUG和错误
- JAVA代码设置selector不同状态下的背景颜色
- Pyspider中给爬虫伪造随机请求头的实例
- Python实现爬虫设置代理IP和伪装成浏览器的方法分享
- 在HTML文档中嵌入JavaScript的四种方法
- 一些Centos Python 生产环境的部署命令(推荐)
- 浅谈Vue响应式(数组变异方法)
- spring boot + quartz集群搭建的完整步骤