模块化开发
实际的项目中需要模块化以便降低代码的耦合，提高项目的复用性与可维护性。在早期，JavaScript 大多被用来执行很小的独立的脚本任务，一直没有模块体系。随着前端越来越多地需要运行大量 JavaScript 脚本的复杂程序的出现。有必要开始考虑提供一种将 JavaScript 程序拆分为可按需导入的单独模块的机制。在 JS 模块化规范之前，通行的 Javascript 模块规范共有两种： CommonJS 和 AMD。随着 ES6 的发布，ES6 模块已经成为正式的标准。并且新的浏览器也都开始原生支持模块功能了。
CommonJS 规范主要用于服务器端编程，加载模块是同步的。AMD 规范主要在浏览器环境中异步加载模块，可以并行加载多个模块。ES6 实现了语言标准级别的简单模块功能，可以是浏览器和服务器通用的模块解决方案。ES6 模块规范最大的特点就是静态化，静态化的优势在于可以在编译的时候确定模块的依赖关系以及输入输出的变量。CommonJs 和 AMD 都只能在运行时确定这些东西。
ES6 模块
ES6 模块功能主要由两个命令构成：export 和 import。export命令用于规定模块的对外接口，import 命令用于引入其他模块提供的功能。浏览器加载 ES6 模块，同样使用 <script> 标签，但是要加入 type="module" 属性。下面以 ES6 模块的形式重写 Hello Vue 的例子：
单文件组件
在模块化系统中，Vue 提供了单文件组件（又名 *.vue 文件，缩写为 SFC）来构建系统。 SFC 可以将 Vue 组件的模板、逻辑与样式封装在单个文件中。是经典的 HTML、CSS 与 JavaScript 三个经典组合的自然延伸。每个 *.vue 文件由三种类型的顶层代码块组成：<template>、<script> 与 <style>：
- <script> 部分是一个标准的 JavaScript 模块。它应该导出一个 Vue 组件定义作为其默认导出。
- <template> 部分定义了组件的模板。
- <style> 部分定义了与此组件关联的 CSS。
Vue SFC 是框架指定的文件格式，必须由 @vue/compiler-sfc 预编译为标准的 JavaScript 与 CSS。 编译后的 SFC 是一个标准的 JavaScript（ES）模块——这意味着通过正确的构建配置，可以像模块一样导入 SFC。下面是一个基于 Vue-CLI 为模板的 Hello vue 例子：
组合式 API
通过创建 Vue 组件，可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使应用具有更高的可维护性和灵活性。然而，经验已经证明，光靠这一点可能并不够，尤其是应用变得非常大的时候。进一步的共享和重用代码变得尤为重要。
在创建 Vue 组件时，往往同一个逻辑关注点需要通过 data、computed、methods、watch 等不同组件选项一起来组织逻辑相关代码。而同一选项中又杂糅着不同的逻辑关注点，当组件变得越来越庞大时，这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题，如果能够将同一个逻辑关注点相关代码收集在一起会更好。而这正是组合式 API 能够做到的。
有关组合式 API 的具体应用场景与优势，请仔细阅读官方的组合式 API文档。 下面结合例子只介绍常用组合式 API 的基本使用。