runtime-compiler和runtime-only区别

runtime-compiler和runtime-only区别

 

新建两个vuecli2项目：

 

```bash

//新建一个以runtime-compiler模式

vue init webpack 02-runtime-compiler

//新建一个以runtime-only模式

vue init webpack 03-runtime-only

```

 

两个项目的main.js区别

 

> runtime-compiler

 

```javascript

import Vue from 'vue'

import App from './App'

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  components: { App },

  template: '<App/>'

})

```

 

> runtime-only

 

```javascript

import Vue from 'vue'

import App from './App'

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

  el: '#app',

  render: h => h(App)

})

```

 

`render: h => h(App)`

 

```javascript

render:function(h){

  return h(App)

}

```

 

**compiler编译解析template过程**

 

`vm.options.template`解析成`ast(abstract syntax tree)`抽象语法树，抽象语法树编译成`vm.options.render(functions)`render函数。render函数最终将template解析的ast渲染成虚拟DOM（`virtual dom`），最终虚拟dom映射到ui上。

 

**runtime-compiler**

template会被解析 => ast(抽象语法树) => 然后编译成render函数 => 渲染成虚拟DOM（vdom）=> 真实dom(UI)

**runtime-only**

render => vdom => UI

 

1.性能更高，2.需要代码量更少

 

> render函数

 

```javascript

render:function(createElement){

  //1.createElement('标签',{标签属性},[''])

  return createElement('h2',

    {class:'box'},

    ['Hello World',createElement('button',['按钮'])])

  //2.传入组件对象

  //return createElement(cpn)

}

```

 

h就是一个传入的createElement函数，.vue文件的template是由vue-template-compiler解析。

 

将02-runtime-compiler的main.js修改

 

```javascript

new Vue({

  el: '#app',

  // components: { App },

  // template: '<App/>'

  //1.createElement('标签',{标签属性},[''])

  render(createElement){

    return createElement('h2',

    {class:'box'},

    ['hello vue', createElement('button',['按钮'])])

  }

})

```

 

并把config里面的inedx.js的`useEslint: true`改成false，即关掉eslint规范，打包项目`npm run dev`，打开浏览器。

在修改main.js

 

```javascript

new Vue({

  el: '#app',

  // components: { App },

  // template: '<App/>'

  //1.createElement('标签',{标签属性},[''])

  render(createElement){

    // return createElement('h2',

    // {class:'box'},

    // ['hello vue', createElement('button',['按钮'])])

    //2.传入组件

    return createElement(App)

  }

```

 

再次打包，发现App组件被渲染了。