html页面中的js不识别el表达式_Vue.js完整版和运行时版的区别

在vue.js的官方文档中有关于对vue.js不同构建版本的解释，这里加上自己的理解总结出来。附上连接啦。

https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A​cn.vuejs.org

官方提供了两个版本给我们，分别是vue.js【完整版】和vue.runtme.js【运行时版】。在实际环境中，应当使用运行时版本，原因是因为vue.runtime.js的体积更小，在用户网络不好的情况下，能够更快的加载。下面介绍二者的具体差别。

vue.js

在创建一个编译模时，vue.js为我们提供了一套模板，使我们能够使用v-if，v-for等这样的语法来编写html。但实际上浏览器是无法识别v-if，v-for这种语法，而是需要通过一个模板编译器来将这样的模板转换为浏览器认识的html。

//完整版
<div id="app"></div>

new Vue({
  el:'#app',
  template:'<div> {{ value }} </div>',
  data:{
    value:0
  }
})

所以vue.js完整版（包含编译器和运行时的版本）需要编译器将template模板字符串编译成JavaScript渲染函数的代码，从而实现将html字符串插入到页面的html中实现渲染。

vue.runtime.js

vue.runtime.js和vue.js的区别在于:vue.runtime.js不包含模板编译器，因而她的体积也会相应的减少了很多。但显然如果没有模板编译器，那么上面代码中的template模板字符串就无法转化为原始的html字符串。但是与其将模板字符串在用户端编译，为何不在开发的时候编译好再发送给用户呢？这样做就节省了vue.js中模板编译器所需要的体积，下面是使用vue.runtime.js实现和上述vue.js相同的功能代码：

//运行时的版本
new Vue({
  el:'#app',
  data(){
    return {
      value:0
    }
  },
  render (h) {
    return h('div', this.value')
  }
})

运行时版本不需要使用编译器,从而使她比vue.js的体积小了约30%。上述代码中的render函数的h参数是vue.runtime.js提供的函数，他接受模板字符串中的参数，返回渲染好的原始的html。

在实际的开发中，由于h函数的参数比较复杂，我们通常会通过使用webpack的vue-loader插件能将vue单文件组件（以.vue结尾的文件）转换为h函数所需要的参数。

参考链接：

流天酱：vue.js完整版与运行时版的区别​zhuanlan.zhihu.com

李刚：vue-loader&vue-template-compiler详解​zhuanlan.zhihu.com