一、vue内部过程　

　　1.首先将vue中的模板进行解析解析成abstract syntax tree （ast）抽象语法树
　　2.将抽象语法树在编译成render函数
　　3.将render函数再翻译成virtual dom 虚拟dom
　　4.将虚拟dom显示在浏览器上

二、runtime-only和runtime-compiler的区别

　　runtime-only比runtime-compiler更快，因为它省略了vue内部过程中的第一个过程，如果是runtime-compiler
　　那么main.js中就会出现template从而需要过程一导致增加了一个过程，同时增加了大小

三、render和template的使用

Render详解

Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中
createElement这个函数中有3个参数

  • 第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数
  • 第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类
  • 第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的
    1. render (createElement) {
    2.   return createElement(
    3.     'comp-one',
    4.     {
    5.       ref: 'comp',
    6.       on: { // 事件监听(一)，这里是组件上监听，需要 $emit
    7.         click: this.handleClick
    8.       },
    9.     },
    10.     [
    11.       createElement('span', {
    12.         ref: 'span'
    13.       }, this.value)
    14.     ])
    15. }

    template的使用

    1. template: `
    2.   <div>
    3.     <comp-one ref="comp">
    4.       <span ref="span">{{value}}</span>
    5.     </comp-one>
    6.   </div>
    7. `,

    codesandbox.io 在线编程网站的使用

    网速不好，进网站就会用捕获.JPG