Vue 两个版本的区别和使用方法

100 阅读2分钟

1.Vue 两个版本的区别

  • 特点:完整版的Vue有compiler编译器,非完整版Vue则没有。导致完整版的Vue比非完整的Vue多了40%的体积。
  • 视图:完整版的Vue的视图是写在html或template选项中,非完整版Vue写在render函数中,用h来创建标签,h的名字可以改成任意的名字。
  • cdn引入:完整版使用vue.js引入,非完整版使用vue.runtime.js引入
  • webpack引入:默认使用非完整版Vue,引入完整版Vue需要配置alias。
  • @vue/cli引入:默认使用非完整版Vue,引入完整版Vue需要额外配置。

*实际开发中最佳体验是总是使用非完整版本Vue,配合vue-loader和vue文件。可以保证用户体验,用户下载的js文件更小。缺点是只支持h函数。

2..两个版本引入时对应的文件名

完整版Vue:vue.js

不完整版Vue:vue.runtime.js

bootcdn.cn

3.template 和 render 怎么用?

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})
 
// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

4.template与render函数对比

1)相同之处:

render 函数 跟 template 一样都是创建 html 模板

2)不同之处:

Template适合逻辑简单,render适合复杂逻辑。

使用者template理解起来相对容易,但灵活性不足;自定义render函数灵活性高,但对使用者要求较高。

3)render的性能较高,template性能较低。

4)基于上一点,我们通过vue组件渲染流程图知道,使用render函数渲染没有编译过程,相当于使用者直接将代码给程序。所以,使用它对使用者要求高,且易出现错误

5)render 函数的优先级要比template的级别要高,但是要注意的是Mustache(双花括号)语法就不能再次使用。

5.使用vue/cli的方法搭建一个vue项目

1)全局或局部安装:yarn global add @vue/cli(可以指定版本号)

2)创建一个项目:vue creat 项目文件名(在当前目录创建,也可以自己指定路径)

3)选择要使用的配置:空格选中选项

4)打开创建的目录,运行yarn server ()

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

  1. 进入官网
  2. 点击 "Create a Sandbox, it's free"
  3. 选择 "Vue"

三步就可以创建一个Vue项目!还可以把创建开发好的项目代码下载到本地:选择左上角的file——然后Export to ZIP