4x0 精读Vue官方文档 - 单文件组件

Mottle
768 阅读4分钟

精读 Vue 官方文档系列 🎉

使用方式对比

使用 Vue.js 有两种方式 ：

  1. 纯JavaScrit驱动：模板的编译、Vdom 的创建、视图渲染都在浏览器端完成。
  2. 使用 Vue 官方提供的标准化工具：通过构建工具的支持，可以使用扩展名为 .vue 的单文件组件的形式来使用 Vue。

采用 Vue 标准化工具，开发者只需要在单文件组件 (SFC) 中进行功能编码，其它额外的工作都将交由构建工具进行编译输出。构建工具自带了诸如 babel、Typescript、SCSS、PostCSS 等预处理器，集成了专为 Vue 开发环境服务的插件，例如 eslint-plugin-vue、eslint-plugin-prettier、@vue/cli-plugin-* 等，并搭配 vue-loader 来对单文件组件进行编译输出处理。

下面是两种方式的对比：

标准开发工具纯JavaScript驱动
组件可以模块化引入不支持模块化，组件需要全局定义，并且组件名称不得重复
HTML 风格模板、支持语法高亮HTML 字符串形式的模板、换行困难且不支持语法高亮
支持 CSS Module，可以使用多种 CSS 预处理器编写 CSS不支持 CSS Module，不支持 CSS 预处理器
组件化更完整，会将 HTML、CSS、JavaScript 内聚在一个单文件组件中只有 HTML、JavaScript 会被组件化，CSS 被遗漏
支持构建工具、编译阶段由构建工具完成，并且支持对代码优化，性能大大提高不支持构建工具，浏览器端完成模板编译

在 Vue1.x 版本早期，Vue-cli 还未面世，人们会依赖构建工具例如 webpack 的模块化系统实现局部组件模块的导入导出与注册。它可以被视为 纯 JavaScript 驱动到现代 Vue 标准化工具开发的过渡阶段。

单文件组件

SFC（Single-File Components) 单文件组件。 一个模块对应一个组件，每个模块同时包含了 template、style、script 三个部分，通过将这些不同的内容内聚在一个模块中，从而让组件更集中、更易于开发与管理。

  • template : 组件的模板部分、语法全面拥抱 HTML WebComponent 规范，上手简单易于使用。
  • script : 组件的逻辑部分，采用 optionsAPI 方式编写，直观易懂。
  • style : 组件的样式部分，支持 CSS Module。

Vue 的单文件组件也可以使用较为松散形式的内聚：

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

当然，你也可以基于构建工具的模块化系统，将逻辑与样式作为独立的模块 import/require 进来。

由此我们可以看出 Vue 的单文件组件非常类似于 HTML 文件性质，例如组件的样式与逻辑既可以内联也可以外链。

关注点分离

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

其实二者在我看来并不冲突，因为对于传统应用来说，其代码库是基于语言类型层面来进行的划分，而对于现代应用的开发，特别是以 Vue 的视角来看，一个应用或功能都是由一个一个组件进行堆砌而成，然后在组件内部进行关注点的分离。因此二者的差异在于看待应用开发模式上的不同。

自定义构建工具

webpack + vue-loader 可以实现针对 Vue 项目的自定义构建。

Vue With Vscode

Vetur

Vetur是 Vue 社区专门打造的一款 VScdoe 插件，目的于完善在 Vscode 中开发 Vue 的体验，解决自定义的 .vue 文件类型不能被识别的问题。

它主要提供了以下功能：

  • 基于 prettier 格式化模板、CSS、JS。
  • 语法高亮
  • Emmet 自动生成模板中的 HTML 标签
  • 错误检查与质量检查
  • 代码提示与补全
    • 例如一些内置组件 transition，component 等。
    • 内置组件的一些属性提示
    • Vue 组件实例上的方法与属性提示
  • 代码片段 - Snippet
    • 快速创建 template 标签
    • 快速创建基于不同css预处理器的 style 标签
    • 快速创建基于 composition-api、typescript 或者传统 javascript 的 script 标签。

需要注意的是 Vetur 内置了对模板、逻辑与样式的的错误检查，但是代码质量检查是基于 Eslint 实现，因此要确保 VScode 已经安装了 Eslint 插件。

如果存在 ESlint 与 Prettier 格式化规则冲突时，则需要在 .eslintrc.js 中覆盖 prettier 规则即可。

avatar
文章
阅读
粉丝