基于Vue2的独立构建与运行时构建的差别(详解)

基于Vue2的独立构建与运行时构建的差别

独立构建和运行时构建的差别

Vue.js 2.0 提供了两种构建版本：完整版和运行时版本。独立构建包含 Vue 的完整版，包括编译器和反应器，可以自行编译模板并在运行时编译。而运行时构建则仅包含运行时版本，不包含编译器。使用运行时版本需要提前将为模板编译好的渲染函数传递给 Vue 实例。

运行时构建的优势在于它体积更小，同时在构建时会更快。但是，如果使用独立构建版本的 Vue，则可以在模板中使用可选的模板语法，如表达式等。

使用独立构建

要使用独立构建版本的 Vue，需要引入完整版的 build：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

接下来，可以直接在 HTML 中创建 Vue 实例：

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

其中，data 选项是必须的，用于声明组件的数据。

使用运行时构建

要使用运行时构建版本的 Vue，需要引入运行时版本的 build：

<!-- 引入 runtime 版本的 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.runtime.min.js"></script>

由于运行时版本的 build 不包括编译器，因此需要在构建时预编译模板。例如：

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.runtime.min.js"></script>
<script>
// 在构建时预编译模板
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  // 提供为模板编译好的渲染函数
  render: function (h) { return h(App) }
})
</script>

在这个例子中，由于使用了运行时版本的 build，需要提供为模板编译好的渲染函数 render，render 接受 createElement 方法作为参数，返回一个 VNode 对象，用于渲染组件。

实战

使用独立构建

<div id="app">
  <h1>{{ title }}</h1>
  <p>{{ message }}</p>
  <button v-on:click="changeTitle">Change title</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    title: 'Welcome to My App',
    message: 'Hello, Vue!'
  },
  methods: {
    changeTitle: function () {
      this.title = 'My App'
    }
  }
})
</script>

这段代码中，我们使用独立构建的 Vue，并且在模板中使用了表达式 {{ title }} 和指令 v-on:click。

使用运行时构建

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.runtime.min.js"></script>
<script>
// 组件定义
const MyComponent = {
  data: function () {
    return {
      title: 'Welcome to My App',
      message: 'Hello, Vue!'
    }
  },
  methods: {
    changeTitle: function () {
      this.title = 'My App'
    }
  },
  // 使用 h 函数渲染组件
  render: function (h) {
    return h('div', [
      h('h1', this.title),
      h('p', this.message),
      h('button', {
        on: {
          click: this.changeTitle
        }
      }, 'Change title')
    ])
  }
}

const app = new Vue({
  el: '#app',
  // 提供为组件编译好的渲染函数
  render: function (h) {
    return h(MyComponent)
  }
})
</script>

这段代码中，我们使用运行时构建的 Vue，并且预编译了组件的模板，提供了为组件预编译好的渲染函数 render。在组件中，我们使用了 createElement 方法 h 来创建子节点。