Vue 的完整版 与 运行时版

完整版与运行时版

• 文件名
  • 完整版：vue.js / vue.min.js
  • 运行时版：vue.runtime.js / vue.runtime.min.js
• 编译器（compiler）
  • 完整版自带有 compiler，可以对 HTML 文件中或 template 选项中的代码进行编译
  • 运行时版没有 compiler，所以无法识别 HTML 文件中或 template 选项中的代码，只能写在 render 函数中，用 h 来创建标签
  • compiler 占用了完整版 40% 的体积
• 引入
  • webpack 引入：默认使用运行时版，使用完整版需配置 alias
  • @vue/cli 引入：默认使用运行时版，使用完整版需额外配置

最佳实践：使用 运行时版 + vue文件 + vue-loader

• 运行时版的文件体积更小
• vue文件中可直接使用 HTML 标签，避免使用 h 函数
• vue-loader 可以将 vue 文件的 HTML 转为 h 函数，让运行时版可以识别

template 与 render

template

new Vue({
    el: '#app',
    template: `
        <div>
            {{ n }}
            <button @click="add">+1</button>
        </div>
    `,
    data() {
        return {
            n: 0
        }
    },
    methods: {
        add() {
            this.n += 1
        }
    }
})

render

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

codesandbox.io

codesandbox.io 是一个 javascript 的线上沙箱环境

codesandbox 拥有所有流行框架的模板，方便快速创建项目，例如 Vue2：

左侧为目录，中间为编辑器，右侧为即时编译部署后的效果界面：