快捷導(dǎo)航

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

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

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

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

從HTML得到視圖

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

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	// ...
  configureWebpack: {
    resolve: {
      alias: {
        vue$: 'vue/dist/vue.esm.js', // 用 webpack 1 時(shí)需用 '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,
  },
})
// 或者傳一個(gè)字符串給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就只有一個(gè)div#app，SEO不友好

新建一個(gè)單文件組件 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)建方法

完整版和運(yùn)行時(shí)版的區(qū)別

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

運(yùn)行時(shí)版：沒有編譯器，體積小

如果把視圖寫在HTML或template選項(xiàng)會(huì)報(bào)錯(cuò)

兩者對(duì)比

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