浅析两个Vue版本

135 阅读1分钟

一、对应的文件名

vue.js(完整版):包含编辑器(compiler)功能和不完整版的功能,

vue.runtime.js(非完整版也叫运行时版):不包含编辑器功能,创建Vue实例,渲染并处理虚拟DOM。

二、两个版本的区别

上面表格清楚的展示了两个版本的区别,完整版功能更强,运行时版体积更小且功能更弱。

三、最佳实施

使用运行时版,再搭配vue-loader和vue来使用。

  1. 保证用户体验,用户下载的JS文件有更小的体积,但仅支持h函数。
  2. 保证开发体验,开发者能直接在vue文件中写html标签,而不写h函数。
  3. 具体是通过vue-loader将vue文件中的HTML转化为h函数。

四、使用codesandbox.io来写Vue代码

输入 codesandbox.io/ 进入网址,点击代表Vue的V图标。

在如下区域开始写代码。

点击file,再点击Export to ZIP ,写完之后导出ZIP就行了。

五、template和render

template可以直接写在html和js上,如:

<template>
  <div class="pink">
    {{ n }}
    <button @click="add">+1</button>
  </div>
</template>

render接收一个参数h,vue用这个参数去创建实例:

 render(h){
    return h('div',[this.n,h('on:{click:this.add}','+1')])
  },