二、了解 Vue.js
Vue.js 是一个用于开发客户端应用的灵活而强大的开源框架，它采用了服务器端开发领域的设计原则，并将这些原则应用于 HTML 元素，从而为构建丰富的 web 应用提供了一个基础。在本书中，我解释了 Vue.js 是如何工作的，并演示了它提供的不同特性。
这本书和 Vue.js 发布时间表
Vue.js 开发团队尽最大努力确保 Vue.js API 的变化尽可能小，这是一个令人耳目一新的变化，不同于其他客户端框架不断出现的重大更新。Vue.js 有频繁的更新，但是你应该发现它们通常不会阻止现有的应用工作，这对你的项目和本书中的例子来说是个好消息。
即便如此，Vue.js 版本仍有可能阻止某些示例按预期运行。每当这种情况发生时，要求读者购买这本书的新版本似乎是不公平或不合理的，特别是因为 Vue.js 的大多数功能即使在主要版本中也不太可能改变。取而代之的是，我将在本书 https://github.com/Apress/pro-vue-js-2 的 GitHub 资源库中发布主要版本的更新。
这是我(和 press)正在进行的实验，这些更新可能采取的形式还不确定——尤其是因为我不知道 Vue.js 的主要版本将包含什么——但目标是通过更新书中包含的示例来延长这本书的寿命。
我不承诺更新会是什么样的，它们会采取什么形式，或者在我把它们折叠成这本书的新版本之前，我会花多长时间来制作它们。当新的 Vue.js 版本发布时，请保持开放的态度并检查这本书的存储库。如果您对如何改进更新有任何想法，请发电子邮件至adam@adam-freeman.com告诉我。
该不该用 Vue.js？
Vue.js 不是所有问题的解决方案，知道什么时候应该使用 Vue.js，什么时候应该寻求替代方案是很重要的。Vue.js 提供了过去只有本地应用开发人员才能使用的功能，并使其完全在浏览器中可用。这对浏览器提出了很多要求，浏览器必须运行 Vue.js 应用，处理 HTML 元素，执行 JavaScript 代码，处理事件，并执行启动 Vue.js 应用所需的所有其他任务，就像您在第 2 章中看到的那样。
这种工作需要时间来执行，时间的长短取决于 Vue.js 应用的复杂程度、浏览器的质量以及设备的处理能力。在功能强大的台式机上使用最新的浏览器时，你不会注意到任何延迟，但功能不足的智能手机上的旧浏览器确实会减慢 Vue.js 应用的初始设置。
因此，目标是尽可能少地执行这种设置，并在执行时向用户交付尽可能多的应用。这意味着仔细考虑您构建的 web 应用的类型。从广义上讲，web 应用有两种:往返和单页。
了解往返应用
很长一段时间以来，web 应用的开发都遵循一个往返模型。浏览器向服务器请求一个初始的 HTML 文档。用户交互——比如单击一个链接或提交一个表单——使浏览器请求并接收一个全新的 HTML 文档。在这种应用中，浏览器本质上是 HTML 内容的呈现引擎，所有的应用逻辑和数据都驻留在服务器上。浏览器发出一系列无状态的 HTTP 请求，服务器通过动态生成 HTML 文档来处理这些请求。
许多当前的 web 开发仍然是针对往返应用的，尤其是业务线项目，尤其是因为它们对浏览器的要求很少，并且拥有尽可能广泛的客户端支持。但是往返应用也有一些严重的缺点:它们让用户在请求和加载下一个 HTML 文档时等待，它们需要一个大型的服务器端基础设施来处理所有请求和管理所有应用状态，并且它们需要更多的带宽，因为每个 HTML 文档都必须是自包含的，这可能导致服务器的每个响应中都包含相同的内容。Vue.js 不太适合往返应用，因为浏览器必须为从服务器接收的每个新 HTML 文档执行初始设置过程。
理解单页应用
单页应用采取了不同的方法。一个初始的 HTML 文档被发送到浏览器，但是用户交互会导致 Ajax 请求将小的 HTML 片段或数据插入到向用户显示的现有元素集中。初始的 HTML 文档永远不会被重新加载或替换，当 Ajax 请求被异步执行时，用户可以继续与现有的 HTML 交互，即使这只是意味着看到一个“数据加载”消息。
单页面应用非常适合 Vue.js 和其他客户端框架，包括 Angular 和 React，因为浏览器初始化应用的工作只需执行一次，之后应用在浏览器中运行，响应用户交互并请求后台所需的数据或内容。
将 Vue.js 与反应和角度进行比较
Vue.js 有两个主要的竞争对手:React 和 Vue.js。它们之间存在差异，但是，在大多数情况下，所有这些框架都很优秀，它们都以相似的方式工作，并且它们都可以用于创建丰富和流畅的客户端应用。
一个关键的区别是 Vue.js 只专注于向用户呈现 HTML 内容，并不直接包括其他功能，如异步 HTTP 请求或 URL 路由。但是这种差异很大程度上是学术性的，因为这些特性是通过由 Vue.js 开发团队认可甚至开发的包提供的，并且大多数 Vue.js 项目使用相同的一组包。
这些框架之间的真正区别在于开发人员的体验。例如，Angular 需要使用 TypeScript 才能有效，而它只是 Vue.js 项目的一个选项。Vue.js 和 React 倾向于混合 HTML 和 JavaScript，这不是每个人都喜欢的。
我的建议很简单:选择你最喜欢的框架，如果你不喜欢，就换一个。这可能看起来是一种不科学的方法，但是这是一个不错的选择，并且您会发现许多核心概念会在框架之间延续，即使您改变了您使用的框架。
如果你想要仔细比较特性，那么请看 https://vuejs.org/v2/guide/comparison.html ，它对 Vue.js 和其他框架进行了全面的比较，尽管它是由 Vue.js 团队编写的。但是不要陷入比较底层特性的泥潭，因为所有这些框架都是好的；它们都可以用来编写大型复杂的项目，最好的框架总是适合您的个人开发风格，并且您在其中最有效率。
了解服务器端呈现
服务器端渲染(也称为 SSR)是另一个与 SPAs 相关的术语，旨在使 web 应用在用户首次导航到 URL 时响应更快，并允许搜索引擎更好地索引 web 应用内容。
SSR 使用 Node.js 作为服务器端 JavaScript 运行时，在服务器上执行 web 应用，以生成呈现给用户的内容。此时，应用是一个往返应用，每次交互都会向服务器发出一个新的 HTTP 请求，服务器继续代表用户执行应用，并将生成的 HTML 发送回浏览器，以便向用户显示。同时，在后台下载执行该应用所需的代码和内容，并用于初始化该应用，此时该应用成为单页应用，用户交互由浏览器中运行的代码处理。
有支持 Vue.js 应用 SSR 的可用包，但我不在本书中描述它们。服务器端的渲染很复杂，仅限于能够执行 JavaScript 的服务器，因为它们负责代表用户运行应用。应用必须注意不要依赖需要浏览器的特性或 API，因为这些特性在服务器上是不可用的。在服务器端呈现和客户端呈现之间无缝切换对用户来说也是困难和困惑的，尤其是在出现问题的时候。这些困难和限制意味着 SSR 不适合大多数 Vue.js 项目，应该谨慎对待。参见 https://vuejs.org/v2/guide/ssr.html 了解关于 Vue.js 的 SSR 支持的更多细节
了解应用的复杂性
在决定 Vue.js 是否适合某个项目时，应用的类型并不是唯一的考虑因素。项目的复杂性也很重要，我经常听到一些读者说，他们已经开始使用客户端框架(如 Vue.js、Angular 或 React)进行项目，而简单得多的框架就足够了。像 Vue.js 这样的框架需要投入大量的时间来掌握(正如本书的篇幅所展示的)，如果你只需要验证一个表单或编程填充一个选择元素，这种努力是不值得的。
在围绕客户端框架的兴奋中，很容易忘记浏览器提供了一组丰富的可以直接使用的 API，这些 API 也是 Vue.js 所有功能所依赖的 API。如果您有一个简单且独立的问题，那么您应该考虑直接使用浏览器 API，从文档对象模型(DOM) API 开始。你会看到本书中的一些例子直接使用了浏览器 API，但是如果你是浏览器开发新手，那么 https://developer.mozilla.org 是一个很好的起点，它包含了浏览器支持的所有 API 的良好文档。
浏览器 API 的缺点，尤其是 DOM API，是它们可能很难使用，并且旧的浏览器倾向于以不同的方式实现特性。jQuery ( https://jquery.org )是直接使用浏览器 API 的一个很好的替代方法，尤其是如果您必须支持旧的浏览器。jQuery 简化了 HTML 元素的使用，并为处理事件、动画和异步 HTTP 请求提供了出色的支持。
像 Vue.js 这样的富客户端框架对于简单的项目需要太多的投资和太多的资源。它们在复杂的项目中发挥了自己的作用，在复杂的项目中，要实现复杂的工作流，要处理不同类型的用户，还要处理大量的数据。在这些情况下，您可以直接使用浏览器 API 或 jQuery，但是管理代码和扩展应用会变得很困难。Vue.js 提供的特性使得构建大型复杂的应用变得更加容易，并且不会陷入大量不可读的代码中，而不采用框架的复杂项目往往会陷入这种困境。
我需要知道什么？
如果您认为 Vue.js 是您项目的正确选择，那么您应该熟悉 web 开发的基础知识，了解 HTML 和 CSS 的工作原理，最好还能掌握 JavaScript 的工作知识。如果你对这些细节有些模糊，我在第三章 3 和第四章 4 中提供了我在本书中使用的 HTML、CSS 和 JavaScript 特性的入门知识。但是，你不会找到关于 HTML 元素和 CSS 属性的全面参考。一本关于 Vue.js 的书没有足够的空间来涵盖所有的 HTML。如果你想温习 HTML、CSS 和 JavaScript 的基础知识，我推荐从 https://developer.mozilla.org 开始。
如何设置我的开发环境？
Vue.js 开发所需的唯一开发工具是您在第 1 章创建第一个应用时安装的工具。后面的一些章节需要额外的软件包，但是提供了完整的说明。如果你在第 1 章成功地构建了应用，那么你就为 Vue.js 开发和本书的其余章节做好了准备。
这本书的结构是什么？
这本书分为三部分，每一部分都涵盖了一系列相关的主题。
第 1 部分:Vue.js 入门
本书的第 1 部分提供了 Vue.js 开发入门所需的信息。它包括本章和 Vue.js 开发中使用的关键技术的入门/复习章节，包括 HTML、CSS 和 JavaScript。我还将向您展示如何构建您的第一个 Vue.js 应用，并带您完成构建一个更真实的应用(称为 SportsStore)的过程。
第 2 部分:使用 Vue.js
本书的第 2 部分将带您了解大多数 Vue.js 项目所需的特性。Vue.js 包括许多内置功能，我将深入描述这些功能，以及将自定义代码和内容添加到项目中以创建定制功能的方式。
第 3 部分:高级 Vue.js 特性
本书的第 3 部分解释了如何使用高级 Vue.js 特性来创建更大更复杂的应用。我描述了 Vue.js 应用的生命周期，向您展示了如何创建一个公共数据存储，并解释了如何根据用户的操作显示应用的各个部分。我还将向您展示如何扩展内置的 Vue.js 特性，以及如何在您的项目中执行单元测试。
有很多例子吗？
有个载荷的例子。学习 Vue.js 的最好方法是通过例子，我已经尽可能多地将它们打包到本书中，并附有截图，以便您可以看到每个特性的效果。为了最大限度地增加本书中的示例数量，我采用了一个简单的约定来避免重复列出相同的代码或内容。当我创建一个文件时，我会显示它的全部内容，就像我在清单 2-1 中所做的那样。我在清单的标题中包含了文件及其文件夹的名称，并且用粗体显示了我所做的更改。
<template>
<div class="container-fluid">
<div class="row">
<div class="col"><error-display /></div>
</div>
<div class="row">
<div class="col-8 m-3"><product-display /></div>
<div class="col m-3"><product-editor /></div>
</div>
</div>
</template>
<script>
import ProductDisplay from "./components/ProductDisplay";
import ProductEditor from "./components/ProductEditor";
import ErrorDisplay from "./components/ErrorDisplay";
export default {
name: 'App',
components: { ProductDisplay, ProductEditor, ErrorDisplay },
created() {
this.$store.dispatch("getProductsAction");
}
}
</script>
Listing 2-1Getting Data in the App.vue File in the src Folder
这是第 21 章的列表，显示了在src文件夹中可以找到的一个名为App.vue的文件的内容。不要担心清单的内容或文件的目的；请注意，这种类型的清单包含文件的完整内容，您需要按照示例进行的更改以粗体显示。
Vue.js 应用中的一些文件可能很长，但是我描述的特性只需要一点小小的改变。我没有列出完整的文件，而是使用省略号(三个句点串联)来表示部分列表，它只显示了文件的一部分，如清单 2-2 所示。
...
<script>
let unwatcher;
export default {
data: function () {
return {
editing: false,
product: {}
}
},
methods: {
save() {
this.$store.dispatch("saveProductAction", this.product);
this.product = {};
},
cancel() {
this.$store.commit("selectProduct");
},
selectProduct(selectedProduct) {
if (selectedProduct == null) {
this.editing = false;
this.product = {};
} else {
this.editing = true;
this.product = {};
Object.assign(this.product, selectedProduct);
}
}
},
created() {
unwatcher = this.$store.watch(state =>
state.selectedProduct, this.selectProduct);
this.selectProduct(this.$store.state.selectedProduct);
},
beforeDestroy() {
unwatcher();
}
}
</script>
...
Listing 2-2Preparing for Dynamic Display in the ProductEditor.vue File in the src/components Folder
这是第 21 章的后续清单，它显示了一组只应用于一个大得多的文件的一部分的更改。当您看到部分清单时，您会知道文件的其余部分不必更改，只有粗体部分不同。
在某些情况下，需要在文件的不同部分进行更改，这使得很难显示为部分列表。在这种情况下，我省略了文件的部分内容，如清单 2-3 所示。
import Vue from "vue";
import Vuex from "vuex";
import Axios from "axios";
import PrefsModule from "./preferences";
import NavModule from "./navigation";
Vue.use(Vuex);
const baseUrl = "http://localhost:3500/products/";
export default new Vuex.Store({
modules: {
prefs: PrefsModule,
nav: NavModule
},
state: {
products: [],
selectedProduct: null
},
// ...other data store features omitted for brevity...
})
Listing 2-3Adding a Module in the index.js File in the src/store Folder
更改仍然用粗体标记，清单中省略的文件部分不受此示例的影响。
从哪里可以获得示例代码？
你可以从 https://github.com/Apress/pro-vue-js-2 下载本书所有章节的范例项目。该下载是免费的，它包含了您学习示例所需的一切，而不必键入所有的代码。
你在哪里可以得到这本书的修改？
你可以在 https://github.com/Apress/pro-vue-js-2 找到这本书的勘误表。
你怎么联系我？
如果你在使用本章中的例子时有问题，或者你在书中发现了问题，那么你可以发电子邮件到adam@adam-freeman.com给我，我会尽力帮助你。在联系我之前，请检查这本书的勘误表，看看它是否包含您的问题的解决方案。
摘要
在这一章中，我解释了 Vue.js 何时是项目的好选择，并概述了替代方案和竞争对手。我还概述了这本书的内容和结构，解释了从哪里获得更新，以及如果您对本书中的示例有问题，如何联系我。在下一章中，我将介绍本书中用来演示 Vue.js 开发的 HTML 和 CSS 特性。
版权属于：月萌API www.moonapi.com，转载请注明出处
