浅析Vue两个版本的区别和使用

463 阅读2分钟

1.两个版本对应的文件名

  • vue.js(完整版)
  • vue.runtime.js(非完整版)

1.1两个版本的区别

标题Vue完整版Vue非完整版评价
特点有compiler没有compilercompiler占40%的体积
视图写在HTML里或者写在template选项里写在render函数里,用h(任意名字)来创建标签h是尤雨溪写好传给render的
cdn引入vue.jsvue.runtime.js文件名不同,生产环境后缀为.min.js
webpack引入需要配置alias默认此版尤雨溪配置的
@vue/cli引入需要额外配置默认此版尤雨溪和蒋豪群配置
  • 完整版里由编译器compiler,有占位符或者其他比较复杂的vue语句时,可以通过分析DOM结点来修改,但是代码体积会比非完整版的大30%。可以从HTMLtemplate直接得到视图,功能更强
  • 非完整版里没有编译器compiler,体积更小,功能更弱。可以通过webpack里的vue-loaderrender翻译,如将html变成h(div,this.n)

1.2最好的使用方法

  • 总是使用非完整版
  • 并且配合使用vue-loadervue文件

1.3思路

  • 保证用户体验,用户下载的js件体积更小,但只支持h函数
  • 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
  • 那么h函数到底谁来写?
    • vue-loader会把vue文件里的HTML转化成h函数

2.template和render怎么用

  • Template可以直接写在htmljs上,如:
<template>
    <div id="app">      
        {{n}}
        <button @click="add">+1</button>   
   </div> 
</template>
  • render函数接收一个参数h,这个参数时vue传的,用这个参数去创建实例
render(h){
    return h('div',[this.n,h('on:{click:this.add}','+1')])
    }

3.如何用codesandbox.io写Vue代码

image.png

  • 在如下页面写代码

image.png

  • 写完可以导出ZIP

image.png