1.VUE程序运行过程

当把template传递给vue实例的时候，vue实例会把该模板内容保存到vm.options，

然后对该template解析成ast(抽象语法树)

将ast编译为render()函数，通过render函数翻译成虚拟DOM

将虚拟DOM渲染成真实的DOM

2. Vue的开发过程中我们有三种方式来编写DOM元素：

方式一：template模板的方式（之前经常使用的方式）；
方式二：render函数的方式，使用h函数来编写渲染的内容；
方式三：通过.vue文件中的template来编写模板；

这三种模板分别怎么处理呢？

方式二中的h函数可以直接返回一个虚拟节点，也就是Vnode节点；
方式一和方式三的template都需要有特定的代码来对其进行解析：
方式三.vue文件中的template可以通过在vue-loader对其进行编译和处理；
方式一种的template我们必须要通过源码中一部分代码来进行编译；

所以，Vue在让我们选择版本的时候分为 运行时+编译器 vs 仅运行时

运行时+编译器（Runtime-Compiler）包含了对template模板的编译代码，更加完整，但是也更大一些；
仅运行时（Runtime-only）没有包含对template版本的编译代码，相对更小一些；

二.Runtime-Compiler和Runtime-only

1.Runtime-Compiler：

选择Runtime-Compiler创建的项目main.js：

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

解析一个template的过程：

template-ast-render()-虚拟DOM-真实DOM

2.Runtime-only解析VUE组件的过程：

选择Runtime-only创建的项目main.js：

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',render: function (h) {return h(App)}
})

render()-虚拟DOM-真实DOM

3.render()函数详解：

h:在render()函数内部是调用createElement('标签'，{标签的属性}，[标签内的内容])，

createElement()普通用法：

new Vue({el: '#app',// render: h => h(App)function render(createElement){return createElement('<>h2</>'，{clsaa:'box'},['helloworld',createElement('button'),['添加']])})
})

第一个参数是一个标签，将创建出来的标签替换index.html中id=app的div标签

第二个参数是对象，标签的属性

第三个参数是数组，标签里面的内容，里面还可以创建新的标签

createElement()传入组件用法：

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',render: function (h) {return h(App)}
})

createElement()也可以以vue组件作为参数，将组件对应的内容替换 index.html中id=app的div标签

这种方式解析vue代码的时候，只有render()-虚拟DOM-真实DOM三个步骤

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

相比于在vue实例中注册组件,再将组件传入template中，解析template需要5个步骤：

template-ast-render()-虚拟DOM-真实DOM

4.vue文件中的template是由谁处理的呢？

为什么App.vue中有template,但是不需要template-ast，可以直接被render()函数编译呢？

vue-loader和vue-template-complier

vue-loader:加载vue文件

vue-template-complier：将vue文件中的template解析成render()函数

因此，在main.js中导入的App里面已经不包含template

项目中所有的vue文件通过vue-template-complier解析过后都不包含template,因此只需要runtime-only

5.Runtime-Compiler和Runtime-only的比较

runtime-only 性能更高，代码量更小

VUE程序运行过程-runtime-complier和runtime-only的区别相关推荐

java 程序运行过程简介
这里的Java程序运行过程,是指我们编译好代码之后,在命令行开始执行java xxx命令,到java程序开始执行起来的这一过程,我们称其为运行时. 第一步,操作系统解析我们输入的java xxx命令, ...
程序运行过程中遇到“ORA-03114: not connected to ORACLE”的问题解决
程序运行过程中遇到"ORA-03114: not connected to ORACLE"的问题解决参考文章: (1)程序运行过程中遇到"ORA-03114: not ...
操作系统之内存管理：1、内存管理基础知识(指令工作原理、地址转化、程序运行过程)
1.内存管理基础知识(指令工作原理.地址转化.程序运行过程) 思维导图什么是内存? 指令的工作原理装入模块的三种实现绝对装入可重定位装入动态重定位程序的运行过程链接的三种方式思维导图 ...
DirectShow程序运行过程简析
这段时间一直在学习陆其明老师的<DirectShow开发指南>一书,书中对DirectShow的很多细节讲解清晰,但是却容易让人缺少对全局的把握.在学习过程中,整理了关于DirectSho ...
深入理解计算机系统---程序运行过程
一个简单的C程序从编写到执行输出hello world!其中间经历的是诸多处理过程,而不仅仅是显示黑屏上的几个字符.这个过程透露着计算机系统的运行本质. 个人对该过程进行了一些分析和总结,如果有不对的 ...
C# winform程序运行过程中提示尝试读取或写入受保护的内存.这通常指示其他内存已损坏的
C# winform程序运行过程中提示"尝试读取或写入受保护的内存.这通常指示其他内存已损坏的" 错误,如下图所示查看详细信息如下未处理System.AccessViolati ...
内存管理——程序运行过程中内存的作用以及如何与cpu、os交互
今年以来,内存条价格暴涨,已经跃升为新的新一代理财产品,所以今天就和大家讨论一下内存条的话题,主要内容就是在程序运行过程中,内存的作用以及如何与CPU,OS交互. 我们先来讨论:计算机的运行究竟是在做 ...
java在程序运行过程中_Java内存管理-程序运行过程（一）
做一个积极的人编码.改bug.提升自己我有一个乐园,面向编程,春暖花开! 勿在浮沙筑高台,出来混迟早要还的. 相信在做Java开发的伙伴一定知道 JVM(Java Virtual Machine( ...
Python 程序运行过程
一. Python 解释器 Python 是一门编程语言,同时也是一个解释器的软件包. 解释器是一种让其他程序运行起来的程序. 当你编写了一段Python 程序,Python 解释器将读取程序,并按 ...

VUE程序运行过程-runtime-complier和runtime-only的区别