文档初探(五): 版本的区别

我们在引入 Vue 的时候有以下几种方式:

1. 直接用<script>引入

2. 用 webpack, parcel 等打包工具引入 vue: npm install vue

3. 使用 Vue 官方推出的@vue/cli

但是 Vue 提供的版本却不止一种, 我们主要将它分为 runtime build 和 full build 两种.

版本的区别

full build

包含 compiler 和 runtime 的 build

runtime build

只包含 runtime 的 build

缺少的 compiler 的作用是将原生的 HTML 和模板字符串编译为 JS 渲染函数. 有了它, 我们可以把视图都写在 HTML 文件里面, 也可以使用实例的template来写视图.在缺少 compiler 的 runtime build 里面, 我们要使用单文件组件, 然后通过 vue-loader 进行编译来达到一样的效果.

	full build	runtime build
script 标签引入	尾缀是 /vue.js	尾缀是/vue.runtime.js
webpack 引入	resolve: { 'vue' : 'vue/dist/vue.js' }	默认版本
@vue/cli	runtimeCompiler: true in vue.config.js	默认版本

template & render

下面是template的写法:

Vue.component("alert-box", {
  template: `
    <div :style="styles">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `,
  data() {
    return {
      styles: {
        border: "red",
        background: "#cc3e44",
        height: "40px",
        width: "100%"
      }
    };
  }
});

下面是render的写法:

// alert.vue
<template>
  <div>
    <strong>Error!</strong>
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>

<style>
div {
  border: red;
  background: #cc3e44;
  height: 40px;
  width: 100%;
}
</style>

import Alert from "alert.vue";
new Vue({
  render: h => h(Alert)
}).$mount("#app");