Vue完整版和runtime版的区别详解

目录

• 创建Vue实例的三种方式
• 从HTML得到视图
• 用JS构建视图
• 使用vue-loader
• 两者对比
• 最佳实践
• SEO友好

创建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

  {{n}} 

main.js

import Vue from 'vue' // 或者在index.html使用CDN引入
new Vue({
  // 挂载到app元素并以其DOM内部的HTML作为模板
  el: '#app',
  data: {
    n: 1,
  },
})
// 或者传一个字符串给template
new Vue({
  template: '
{{ n }}
'
})

用JS构建视图

需要用到render函数，参数是Vue提供的h函数，也即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构建方法，但这样做HTML就只有一个div#app，SEO不友好

新建一个单文件组件 Demo.vue

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

将render()函数打印出来，可以看到该函数将