vuejs3 第5页

INFO 刚接触 Vue.js？先从基础指南开始吧。 本指南主要是为有 Vue 2 经验的用户希望了解 Vue 3 的新功能和更改而提供的。在试用 Vue 3 之前，你不必从头阅读这些内容。虽然看起来有很多变化，但很多你已经了解和喜欢 Vue 的部分仍是一样的。不过我们希望尽可能全面，并为每处变化提供详细的例子。 快速开始 值得注意的新特性 重大改变 支持的库 #概览 点击此处实现 开始学习 Vue 3 Vue Mastery。 #快速开始 通过 CDN：<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script> 通过 Codepen 的浏览器 playground 脚手架 Vite： npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3 脚手架 vue-cli： npm install -g @vue/cli # OR yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset #值得注意的新特性 Vue 3 中需要关注的一些新功能包括： 组合式 API Teleport 片段 触发组件选项 createRenderer API 来自 @vue/runtime-core 创建自定义渲染器 单文件组件组合式 API 语法糖 (“) 实验性 单文件组件状态驱动的 CSS 变量 (“) 实验性 单文件组件 “ 现在可以包含全局规则或只针对插槽内容的规则 #非兼容的变更 提示 我们仍在开发 Vue 3 的专用迁移版本，该版本的行为与 Vue 2 兼容，运行时警告不兼容。如果你计划迁移一个非常重要的 Vue 2 应用程序，我们强烈建议你等待迁移版本完成以获得更流畅的体验。 下面列出了从 2.x 开始的重大更改： #Global API 全局 Vue API 已更改为使用应用程序实例 全局和内部 API 已经被重构为可...

万维网联盟 (W3C) 网络可访问性倡议 (WAI) 为不同的组件制定了 Web 可访问性标准： 用户代理无障碍指南 (UAAG) 网络浏览器和媒体播放器，包括一些辅助技术 创作工具辅助功能指南 (ATAG) 创作工具 网络内容无障碍指南 (WCAG) web 内容——由开发人员、创作工具和可访问性评估工具使用 #网络内容无障碍指南 (WCAG) WCAG 2.1 在 WCAG 2.0 上进行了扩展，允许通过处理 web 的变化来实现新技术。W3C 鼓励在开发或更新 Web 可访问性策略时使用 WCAG 的最新版本。 #WCAG 2.1 四大指导原则 (缩写 POUR)： 可感知性 用户必须能够感知所渲染的信息 可操作性 表单界面，控件和导航是可操作的 可理解性 信息和用户界面的操作必须为所有用户所理解 稳健性 随着技术的进步，用户必须能够访问内容 #Web 可访问性倡议——可访问的富互联网应用程序 (WAI-ARIA) W3C 的 WAI-ARIA 为如何构建动态内容和高阶用户界面控件提供了指导。 可访问的富 Internet 应用程序 (WAI-ARIA) 1.2 WAI-ARIA 创造实践 1.2

#表单 当创建一个表单，你可能使用到以下几个元素：<form>、<label>、<input>、<textarea> 和 <button>。 标签通常放置在表单字段的顶部或左侧： <form action="/dataCollectionLocation" method="post" autocomplete="on"> <div v-for="item in formItems" :key="item.id" class="form-item"> <label :for="item.id">{{ item.label }}: </label> <input :type="item.type" :id="item.id" :name="item.id" v-model="item.value" /> </div> <button type="submit">Submit</button> </form> 点击此处实现 注意如何在表单元素中包含 autocomplete='on'，它将应用于表单中的所有输入。你也可以为每个输入设置不同的自动完成属性的值。 #标签 提供标签以描述所有表单控件的用途；链接 for 和 id： <label for="name">Name</label> <input type="text" name="name" id="name" v-model="name" /> 点击此处实现 如果你在 chrome 开发工具中检查这个元素，并打开 Elements 选项卡中的 Accessibility 选项卡，你将看到输入是如何从标签中获取其名称的： 警告： 虽然你可能已经看到这样包装输入字段的标签： <label> Name: <input type="text" name="name" id="name" v-model="name" /> </label> 辅助技术更好地支持用匹配的 id 显式设置标签。 #aria-label 你也可以给输入一个带有aria-label 的可访问名称。 <label for="name">Name</label> <input type="text" name="name" id="name" v-model="name" :aria-label="nameLabel" /> 点击此处实现 请随意在 Chrome DevTools 中检查此元素，以查看可访问名称是如何更改的： #aria-labelledby 使用 aria-labelledby 类似于 aria-label，除非标签文本在屏幕上可见。它通过 id 与其他元素配对，你可以链接多个 id： <form class="demo" action="/dataCollectionLocation" method="post" autocomplete="on" > <h1 id="billing">Billing</h1> <div class="form-item"> <label for="name">Name:</label> <input type="text" name="name" id="name" v-model="name" aria-labelledby="billing name" /> </div> <button type="submit">Submit</button> </form> 点击此处实现 #aria-describedby aria-describedby...

#SSR 完全指南 我们创建了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入，适合已经熟悉 Vue、webpack 和 Node.js 开发的开发者阅读。请移步 ssr.vuejs.org。 #Nuxt.js 从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。 #Quasar Framework SSR + PWA Quasar Framework 可以通过其一流的构建系统、合理的配置和开发者扩展性生成 (可选地和 PWA 互通的) SSR 应用，让你的想法的设计和构建变得轻而易举。你可以在服务端挑选执行超过上百款遵循“Material Design 2.0”的组件，并在浏览器端可用。你甚至可以管理网站的 <meta> 标签。Quasar 是一个基于 Node.js 和 webpack 的开发环境，它可以通过一套代码完成 SPA、PWA、SSR、Electron、Capacitor 和 Cordova 应用的快速开发。

类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex：我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools，无需配置即可进行时光旅行调试 (time travel debugging)。 #React 的开发者请参考以下信息 如果你是来自 React 的开发者，你可能会对 Vuex 和 Redux 间的差异表示关注，Redux 是 React 生态环境中最流行的 Flux 实现。Redux 事实上无法感知视图层，所以它能够轻松的通过一些[简单绑定_blank_nofollow](https://classic.yarnpkg.com/en/packages?q=redux vue&p=1)和 Vue 一起使用。Vuex 区别在于它是一个专门为 Vue 应用所设计。这使得它能够更好地和 Vue 进行整合，同时提供简洁的 API 和改善过的开发体验。 #简单状态管理起步使用 经常被忽略的是，Vue 应用中响应式 data 对象的实际来源——当访问数据对象时，一个组件实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，你可以使用一个 reactive 方法让对象作为响应式对象。 const sourceOfTruth = Vue.reactive({ message: 'Hello' }) const appA = Vue.createApp({ data() { return sourceOfTruth } }).mount('#app-a') const appB = Vue.createApp({ data() { return sourceOfTruth } }).mount('#app-b') <div id="app-a">App A: {{ message }}</div> <div id="app-b">App B: {{ message }}</div> 现在当 sourceOfTruth 发生变更，appA 和 appB 都将自动地更新它们的视图。我们现在只有一个真实来源，但调试将是一场噩梦。我们应用的任何部分都可以随时更改任何数据，而不会留下变更过的记录。 const appB = Vue.createApp({ data() { return sourceOfTruth }, mounted() { sourceOfTruth.message = 'Goodbye' // both apps will render 'Goodbye' message now } }).mount('#app-b') 为了解决这个问题，我们采用一个简单的 store 模式： const store =...

#官方 Router 对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。 #从零开始简单的路由 如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件： const NotFoundComponent = { template: '<p>Page not found</p>' } const HomeComponent = { template: '<p>Home page</p>' } const AboutComponent = { template: '<p>About page</p>' } const routes = { '/': HomeComponent, '/about': AboutComponent } const SimpleRouter = { data: () => ({ currentRoute: window.location.pathname }), computed: { CurrentComponent() { return routes[this.currentRoute] || NotFoundComponent } }, render() { return Vue.h(this.CurrentComponent) } } Vue.createApp(SimpleRouter).mount('#app') 结合 HTML5 History API，你可以建立一个麻雀虽小但是五脏俱全的客户端路由器。可以直接看实例应用。 #整合第三方路由 如果你有更偏爱的第三方路由，如 Page.js 或者 Director，整合起来也一样简单。这里有一个使用了 Page.js 的完整示例。

#介绍 虽然 Vue.js 本身并不支持移动应用开发，但是有很多解决方案可以用 Vue.js 创建原生 iOS 和 Android 应用。 #混合应用开发 #Capacitor Capacitor 是一个来自 Ionic Team 的项目，通过提供跨多个平台运行的 API，开发者可以使用单个代码库构建原生 iOS、Android 和 PWA 应用。 资源 Capacitor + Vue.js Guide #NativeScript NativeScript 使用已熟悉的 Web 技能为跨平台（真正的原生）移动应用提供支持。两者结合在一起是开发沉浸式移动体验的绝佳选择。 资源 NativeScript + Vue.js Guide

Vue CLI 提供内置的 TypeScript 工具支持。 #NPM 包中的官方声明 随着应用的增长，静态类型系统可以帮助防止许多潜在的运行时错误，这就是为什么 Vue 3 是用 TypeScript 编写的。这意味着在 Vue 中使用 TypeScript 不需要任何其他工具——它具有一流的公民支持。 #推荐配置 // tsconfig.json { "compilerOptions": { "target": "esnext", "module": "esnext", // 这样就可以对 `this` 上的数据属性进行更严格的推断` "strict": true, "jsx": "preserve", "moduleResolution": "node" } } 请注意，必须包含 strict: true (或至少包含 noImplicitThis: true，它是 strict 标志的一部分) 才能在组件方法中利用 this 的类型检查，否则它总是被视为 any 类型。 参见 TypeScript 编译选项文档查看更多细节。 #开发工具 #项目创建 Vue CLI 可以生成使用 TypeScript 的新项目，开始： ## 1. Install Vue CLI, 如果尚未安装 npm install --global @vue/cli@next ## 2. 创建一个新项目, 选择 "Manually select features" 选项 vue create my-project-name ## 3. 如果已经有一个不存在TypeScript的 Vue CLI项目，请添加适当的 Vue CLI插件： vue add typescript 请确保组件的 script 部分已将语言设置为 TypeScript： <script lang="ts"> ... </script> #编辑器支持 对于使用 TypeScript 开发 Vue 应用程序，我们强烈建议使用 Visual Studio Code，它为 TypeScript 提供了很好的开箱即用支持。如果你使用的是单文件组件 (SFCs)，那么可以使用很棒的 Vetur extension，它在 SFCs 中提供了 TypeScript 推理和许多其他优秀的特性。 WebStorm...

#介绍 当构建可靠的应用时，测试在个人或团队构建新特性、重构代码、修复 bug 等工作中扮演了关键的角色。尽管测试的流派有很多，它们在 web 应用这个领域里主要有三大类： 单元测试 组件测试 端到端 (E2E，end-to-end) 测试 本章节致力于引导大家了解测试的生态系统的并为 Vue 应用或组件库选择适合的工具。 #单元测试 #介绍 单元测试允许你将独立单元的代码进行隔离测试，其目的是为开发者提供对代码的信心。通过编写细致且有意义的测试，你能够有信心在构建新特性或重构已有代码的同时，保持应用的功能和稳定。 为一个 Vue 应用做单元测试并没有和为其它类型的应用做测试有什么明显的区别。 #选择框架 因为单元测试的建议通常是框架无关的，所以下面只是当你在评估应用的单元测试工具时需要的一些基本指引。 #一流的错误报告 当测试失败时，提供有用的错误信息对于单元测试框架来说至关重要。这是断言库应尽的职责。一个具有高质量错误信息的断言能够最小化调试问题所需的时间。除了简单地告诉你什么测试失败了，断言库还应额外提供上下文以及测试失败的原因，例如预期结果 vs 实际得到的结果。 一些诸如 Jest 这样的单元测试框架会包含断言库。另一些诸如 Mocha 需要你单独安装断言库 (通常会用 Chai)。 #活跃的社区和团队 因为主流的单元测试框架都是开源的，所以对于一些旨在长期维护其测试且确保项目本身保持活跃的团队来说，拥有一个活跃的社区是至关重要的。额外的好处是，在任何时候遇到问题时，一个活跃的社区会为你提供更多的支持。 #框架 尽管生态系统里有很多工具，这里我们列出一些在 Vue 生态系统中常用的单元测试工具。 #Jest Jest 是一个专注于简易性的 JavaScript 测试框架。一个其独特的功能是可以为测试生成快照 (snapshot)，以提供另一种验证应用单元的方法。 资料： Jest 官网 Vue CLI 官方插件 – Jest #Mocha Mocha 是一个专注于灵活性的 JavaScript 测试框架。因为其灵活性，它允许你选择不同的库来满足诸如侦听 (如 Sinon) 和断言 (如 Chai) 等其它常见的功能。另一个 Mocha 独特的功能是它不止可以在 Node.js 里运行测试，还可以在浏览器里运行测试。 资料： Mocha 官网 Vue CLI 官方插件 – Mocha #组件测试 #介绍 测试大多数 Vue 组件时都必须将它们挂载到 DOM (虚拟或真实) 上，才能完全断言它们正在工作。这是另一个与框架无关的概念。因此组件测试框架的诞生，是为了让用户能够以可靠的方式完成这项工作，同时还提供了 Vue 特有的诸如对 Vuex、Vue Router 和其他 Vue 插件的集成的便利性。 #选择框架 以下章节提供了在评估最适合你的应用的组件测试框架时需要记住的事项。 #与 Vue 生态系统的最佳兼容性 毋容置疑，最重要的标准之一就是组件测试库应该尽可能与 Vue 生态系统兼容。虽然这看起来很全面，但需要记住的一些关键集成领域包括单文件组件 (SFC)、Vuex、Vue Router 以及应用所依赖的任何其他特定于 Vue 的插件。 #一流的错误报告 当测试失败时，提供有用的错误日志以最小化调试问题所需的时间对于组件测试框架来说至关重要。除了简单地告诉你什么测试失败了，他们还应额外提供上下文以及测试失败的原因，例如预期结果 vs 实际得到的结果。 #推荐 #Vue Testing Library (@testing-library/vue) Vue Testing Library 是一组专注于测试组件而不依赖实现细节的工具。由于在设计时就充分考虑了可访问性，它采用的方案也使重构变得轻而易举。 它的指导原则是，与软件使用方式相似的测试越多，它们提供的可信度就越高。 资料： Vue...

为了学习如何更好地使用 Vue，不需要阅读本页，但是它提供了更多信息，如果你想知道渲染在背后是如何工作的。 #虚拟 DOM 现在我们知道了侦听器是如何更新组件的，你可能会问这些更改最终是如何应用到 DOM 中的！也许你以前听说过虚拟 DOM，包括 Vue 在内的许多框架都使用这种方式来确保我们的接口能够有效地反映我们在 JavaScript 中更新的更改 点击此处实现 我们用 JavaScript 复制了一个名为 Virtual Dom 的 DOM，我们这样做是因为用 JavaScript 接触 DOM 的计算成本很高。虽然用 JavaScript 执行更新很廉价，但是找到所需的 DOM 节点并用 JS 更新它们的成本很高。所以我们批处理调用，同时更改 DOM。 虚拟 DOM 是轻量级的 JavaScript 对象，由渲染函数创建。它包含三个参数：元素，带有数据的对象，prop，attr 以及更多，和一个数组。数组是我们传递子级的地方，子级也具有所有这些参数，然后它们可以具有子级，依此类推，直到我们构建完整的元素树为止。 如果需要更新列表项，可以使用前面提到的响应性在 JavaScript 中进行。然后，我们对 JavaScript 副本，虚拟 DOM 进行所有更改，并在此与实际 DOM 之间进行区分。只有这样，我们才能对已更改的内容进行更新。虚拟 DOM 允许我们对 UI 进行高效的更新！