0x0 精读Vue官方文档之基础 – 安装 & 介绍

精读 Vue 官方文档系列 ?

Vue 是什么？

读音(/vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

如何理解渐进式框架？

最容易的理解就是将 Vue 与 Angular 和 React 进行对比：

• Angular 是一个强主张的框架。不论你业务功能是否足够复杂，在使用之前就必须要掌握它的“模块机制”、“依赖注入”、“注释语法”等，因此 Angular 具有很强的侵入性。
• 虽然与 Angular 相比 React 没有强主张，但是 React 主张函数式编程，所以在使用之前，还是需要事先了解纯函数、副作用、jsx语法等概念，属于软性侵入。

与它们相比，Vue 就要更加的自由、简单、容易上手。我们可以按需使用 Vue 提供的功能，基于应用的从简单到复杂来逐步递增使用 Vue 提供的功能。

Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，其它功能的增强需要依赖第三方库和项目构建工具。

如何理自底向上？

由基层开始做起，把基础的东西写好，比如先实现页面，再逐层往上添加效果和功能。

Vue 版本介绍

主要版本

vue.js

完整版本，采用 UMD 模块封装，同时包含“编译器”与“运行时”的版本。

编译器： 用来将模板字符串编译成JS渲染函数的代码。

vue.runtime.js

运行时版本，不含有编译器的版本，主要功能就是 Vue 实例的创建以及渲染并处理虚拟 DOM 的代码。

版本后缀说明

• .common : 基于 CommonJS 模块规范的版本。
• .esm : 基于 ESModule 模块规范的版本。
• .esm.browser : 可直接用于浏览器的 ESModule 模块。
• .min : 生产版本，代码会被压缩，注释与提示警告会被删除。

运行时 + 编译器 Vs 只包含运行时

完整版包含运行时与编译器两个部分，主要用于在浏览器端解析模板字符串。

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})
复制代码

当使用了 vue-loader 或 vueify 的时候，构建工具会自动将 *.vue 中的模板编译成 JavaScript 渲染函数，此时只需要使用运行时版本：

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi) //渲染代码由构建工具编译。
  }
})
复制代码

我们推荐使用运行时版本，因为就从文件体积上运行时版本要比完整版本小 30%。

Common / Esm Vs UMD

对于 UMD 版本来说，开发环境/生产环境模式是硬编码好的：开发环境下用未压缩的代码，生产环境下使用压缩后的代码。

CommonJS 和 ES Module 版本则保留了原始的 process.env.NODE_ENV 检测，方便于构建工具结合使用，基于不同的环境变量，灵活的控制源代码的形式。

CSP 环境

Vue 运行时版本支持开启内容安全策略 (CSP)的环境中运行。

content-security-policy.com/

声明式渲染

Vue.js 的核心是一个允许采用简洁模板语法，来声明式的将数据渲染为 DOM 的系统。

声明式渲染的核心在于数据的响应式、从传统的命令方式更改数据、控制渲染、处理行为到基于数据的变更来驱动DOM渲染、行为的处理。

Vue组件与自定义元素

Vue 组件与 Vue 的自定义元素都遵循 W3C 的 Web组件规范，例如 slot APi 与 is 动态组件属性等。

受限于浏览器对原生自定义元素的支持情况，Vue 默认会将模板中的自定义元素进行替换，但在必要时，也可以通过 Vue CLI 将 Vue 组件构建成为原生的自定义元素发布。

vue-cli-service build --target wc --name my-element [entry]
复制代码

Vue 组件对原生自定义元素的功能进行了增强，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。