快捷導(dǎo)航

Vue完整版和runtime版的區(qū)別詳解

更新時間：2022年12月21日 14:27:08 作者：dan_n

這篇文章主要為大家介紹了Vue完整版和runtime版的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

創(chuàng)建Vue實例的三種方式

從HTML得到視圖

前提：使用完整版，CDN引入或者修改配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	// ...
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js', // 用 webpack 1 時需用 'vue/dist/vue.common.js'
      },
    },
  },
})

index.html

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

main.js

import Vue from 'vue' // 或者在index.html使用CDN引入
new Vue({
  // 掛載到app元素并以其DOM內(nèi)部的HTML作為模板
  el: '#app',
  data: {
    n: 1,
  },
})
// 或者傳一個字符串給template
new Vue({
  template: '<div>{{ n }}</div>'
})

用JS構(gòu)建視圖

需要用到render函數(shù)，參數(shù)是Vue提供的h函數(shù)，也即createElement

import Vue from 'vue'
new Vue({
  el: '#app',
  render(h) { // createElement
    return h('div', [this.n, h('button', { on: { click: this.add } }, '+1')])
  },
  data: {
    n: 0,
  },
  methods: {
    add() {
      this.n += 1
    },
  },
})

使用vue-loader

可以把*.vue文件翻譯成h構(gòu)建方法，但這樣做HTML就只有一個div#app，SEO不友好

新建一個單文件組件 Demo.vue

<template>
  <div class="red">
    {{ n }}
    <button @click="add">+1</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        n: 0,
      }
    },
    methods: {
      add() {
        this.n += 1
      },
    },
  }
</script>
<style>
  .red {
    color: red;
  }
</style>

import Vue from 'vue'
import Demo from './Demo.vue'
console.log(Demo.render.toString())
new Vue({
  el: '#app',
  render(h) {
    return h(Demo)
  },
})

將render()函數(shù)打印出來，可以看到該函數(shù)將<template>內(nèi)部代碼翻譯成h構(gòu)建方法

完整版和運行時版的區(qū)別

完整版：運行時+編譯器（compiler將模板字符串編譯成JavaScript渲染函數(shù)的代碼）

運行時版：沒有編譯器，體積小

如果把視圖寫在HTML或template選項會報錯

兩者對比

	特點	視圖	CDN引入	webpack或@vue/cli引入
Vue完整版	有編譯器，體積大	寫在HTML或template選項里	vue.js	需額外配置
Vue運行時版	無編譯器	寫在render函數(shù)里，用參數(shù)h創(chuàng)建標(biāo)簽	vue.runtime.js	默認(rèn)使用