Vue.js学习—单文件组件

1.1 关注点分离

关注点分离（Separation of concerns，SOC）是对只与“特定概念、目标”(关注点)相关联的软件组成部分进行“标识、封装和操纵”的能力，即标识、封装和操纵关注点的能力。是处理复杂性的一个原则。由于关注点混杂在一起会导致复杂性大大增加，所以能够把不同的关注点分离开来，分别处理就是处理复杂性的一个原则，一种方法。

关注点分离是面向对象的程序设计的核心概念。分离关注点使得解决特定领域问题的代码从业务逻辑中独立出来，业务逻辑的代码中不再含有针对特定领域问题代码的调用(将针对特定领域问题代码抽象化成较少的程式码，例如将代码封装成function或是class)，业务逻辑同特定领域问题的关系通过侧面来封装、维护，这样原本分散在在整个应用程序中的变动就可以很好的管理起来。

1.2 为什么使用单文件组件

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，会有以下缺点：

· 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复。

· 字符串模板 (String templates) 缺乏语法高亮。

· 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏。

· 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器。

文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

关注点分离不等于文件类型分离。在现代 UI 开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

即便不喜欢单文件组件，你仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。例如：

<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

1.3 单文件组件

.vue 文件是一个自定义的文件类型，用类HTML语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块：

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

<style>
  .example {
    color: red;
  }
</style>

vue-loader会解析文件，提取每个语言块，如有必要会通过其它loader处理，最后将他们组装成一个ES Module，它的默认导出是一个Vue.js组件选项的对象。

vue-loader支持使用非默认语言，比如CSS预处理器，预编译的HTML模版语言，通过设置语言块的lang属性。例如，你可以像下面这样使用Sass语法编写样式：

<style lang="sass">
  /* write Sass! */
</style>

1.3.1 语言块

模块

· 每个.vue文件最多包含一个<template>块。

· 内容将被提取并传递给vue-template-compiler为字符串，预处理为JavaScript渲染函数，并最终注入到从<script>导出的组件中。

脚本

· 每个.vue文件最多包含一个<script>块。

· 这个脚本会作为一个ES Module来执行。

· 它的默认导出应该是一个Vue.js的组件选项对象。也可以导出由Vue.extend()创建的扩展对象，但是普通对象是更好的选择。

· 任何匹配.js文件 (或通过它的lang特性指定的扩展名) 的 webpack 规则都将会运用到这个<script>块的内容中。

样式

· 默认匹配/\.css$/。

· 一个.vue文件可以包含多个<style>标签。

· <style> 标签可以有 scoped 或者 module 属性 (查看scoped CSS和CSS Module) 以帮助你将样式封装到当前组件。具有不同封装模式的多个<style>标签可以在同一个组件中混合使用。

· 任何匹配.css文件 (或通过它的lang特性指定的扩展名) 的webpack规则都将会运用到这个<style>块的内容中。

自定义块

可以在.vue文件中添加额外的自定义块来实现项目的特定需求，例如<docs>块vue-loader将会使用标签名来查找对应的webpack loader来应用在对应的块上。webpack loader需要在vue-loader的选项loaders中指定。

src导入

如果喜欢把.vue文件分隔到多个文件中，可以通过src属性导入外部文件：

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

需要注意的是src导入遵循和webpack模块请求相同的路径解析规则：

· 相对路径需要以./开始

· 可以从 NPM 依赖中导入资源，例如：

<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="todomvc-app-css/index.css">

在自定义块上同样支持src导入，例如：

<unit-test src="./unit-test.js">
</unit-test>