阅读 317

Vue的完整版和非完整版的差异

Vue是一个前端框架,作者尤雨溪。常用两个版本,俗称完成版和非完整版。在BootCDN( www.bootcdn.cn/ ) 查询"vue",会得到多个版本,挑选如下4个进行说明。

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.runtime.min.js"></script>
复制代码

后面两个带"runtime"就是非完整版,前面两个就是完整版,其中带"min"表示没有注释的版本,体积更小,故时常用的是min的版本。

完整版和非完整版的差异主要在于:完整版包含有compiler(编译器),而非完整版需要搭配vue loader。听起来完整版更加方便,但是事物的两面性就在于完整版体积大,比不完整版大约30%,所以为了更好的客户体验,非完整版成为第一首选。

回归到代码使用,完整版的视图是直接写在HTML里或者template选项里,非完整版要写到render函数里,并用h来创建标签。

//完整版 直接写在template选项里面
<template>
    <div id="app">      
        {{n}}
        <button @click="add">+1</button>   
   </div> 
</template>
复制代码
//非完整版,视图使用render函数,并用h函数创建标签。
render(h){ 
     return h('div', [this.n,h('{on:{click:this.add}’,'+1'])
 }
复制代码

如果版本用错了,浏览器会直接报错。

最后,补充如何创建一个vue项目,这里介绍有两种方法,第1种,按照作者尤雨溪的教程( cli.vuejs.org/zh/guide/cr… )。第2种使用codesandbox,我们重点说说这个:

  1. 进入 codesandbox.io/
  2. Create a sandbox ->选择Vue ->这样就创建好了。
  3. 保存下载。File -> Export to ZIP