Vue学习笔记 - Vue的两个构建版本

Vue是现今前端开发中使用最广泛的框架之一，它有两种构建版本，完整版和只包含运行时版，其对应名称分别为vue.js和vue.runtime.js。两者的关系基本可以认为是【完整版=运行时版+编译器】，即完整版是运行时版的扩充。

完整版包含了一个编译器，它可以将模板字符串编译成为JavaScript渲染函数的代码，当我们使用完整版Vue时，可以将代表视图的字符串写入template属性，Vue会自动将其转换为渲染函数并渲染到页面中：

// 完整版
new Vue({
  template: '<div>{{ hi }}</div>'
})

而运行时版则必须将其写入render函数：

//只包含运行时版
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

尽管第二种方法更加麻烦，但运行时版的体积比完整版大约小30%，所以为了用户体验，推荐总是使用运行时版，而且webpack和@vue/cli工具均默认使用运行时版的Vue。

不过为了同时保证更好的开发体验，开发者可以直接在.vue文件中写HTML的内容，而不写h函数（渲染函数），然后用webpack的vue-loader将.vue文件中的HTML内容自动转为渲染函数。

//Demo.vue文件

<template>
  <div>{{n}}</div>
</template>

<script>
export default {
  data(){
    return {
      n: 0
    }
  }
}
</script>

//main.js文件

import Vue from 'vue'
import Demo from './Demo.vue'

new Vue({
  el: '#app',
  render(h){
     return h(Demo)
   }
})