likes
comments
collection
share

初探Vue

作者站长头像
站长
· 阅读数 311

Vue的两个版本

Vue主要有两个版本,分别是完整版和非完整版

完整版是vue.js / vue.min.js 非完整版是vue.runtime.js / vue.runtime.min.js(vue.js是多了一些注释,min.js是去掉了注释,压缩了代码)

完整版

完整版同时包括编译器(compiler) 和 运行时(runtime)

编译器的功能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码

运行时的功能包括创建 Vue 实例、渲染并处理虚拟 DOM 等,它包括除了编译器的其他所有功能

只包含运行时版

只包含运行时版就只有运行时,没有编译器

两个版本的区别

Vue完整版Vue运行时版
特点有compiler没有compiler
视图写在HTML里,或者写在template选项里写在render函数里,用h创建标签
cdn引入vue.jsvue.runtime.js
webpack引入需要配置alias默认使用
vue@cli引入需要额外配置默认使用

那究竟应该使用哪一个版本呢?最佳实践: 永远用非完整版,然后配合vue-loader和vue文件

原因

  1. 对于用户来说,非完整版下载的js文件体积小,用户体验好,但只支持h函数
  2. 保证开发体验,只能写h函数的话,开发体验不好,如果有compiler, 开发者就能在vue文件里写更直观的HTML标签和template, 所以我们需要一个compiler
  3. vue-loader就可以引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h函数,这样用户和开发者都高兴

template 和 render 的用法

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

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

template标签和JS里的template

//vue文件中的template标签
  <template>
      <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
     </div> 
  </template>

//js中的template
    template : `
        <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
        </div> 
    `

render函数:

//不完整版在js中构建视图
  render(h){ 
       return h('div', [this.n,h('{on:{click:this.add}’,'+1'])
   }

//不完整版使用vue-loader

//先创建一个demo.vue文件,在里面构建视图
    import demo from "./demo.vue"
     new Vue({
       el: "#app",
       render(h) {
         return h(demo)
       }
     })

codesandbox在线创建Vue项目

  1. 进入官网https://codesandbox.io/
  2. 点击 "Create a Sandbox, it's free"
  3. 选择 "Vue"
  4. 可以把项目下载到本地,选择左上角的file——然后Export to ZIP

登录codesandbox.io后只能创建50个项目,不登录可以创建无限个我们可以在codesandbox里在线写Vue的代码,不用任何本地的安装依赖