关于vue.js:初探Vue

2次阅读

共计 1370 个字符，预计需要花费 4 分钟才能阅读完成。

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.js	vue.runtime.js
webpack 引入	须要配置 alias	默认应用
vue@cli 引入	须要额定配置	默认应用

那到底应该应用哪一个版本呢？
最佳实际：永远用非完整版，而后配合 vue-loader 和 vue 文件

起因

对于用户来说，非完整版下载的 js 文件体积小，用户体验好，但只反对 h 函数
保障开发体验，只能写 h 函数的话，开发体验不好，如果有 compiler, 开发者就能在 vue 文件里写更直观的 HTML 标签和 template, 所以咱们须要一个 compiler
vue-loader 就能够引入 compiler, 把 vue 文件里的 HTML 标签和 template 会在构建时预编译成 h 函数，这样用户和开发者都快乐

// 须要编译器
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)
       }
     })