大强博客

Ant Design Vue Select 选择器 全选 功能

然而我们希望它能够保留足够的灵活性，将对单个列表元素内容和样式的控制权留给使用它的父组件。在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。如果我们将这个概念拓展一下，可以想象的是，一些组件可能只包括了逻辑而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 JavaScript 的词法作用域规则是一致的。插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。

除了颜色外，你还可以使用样式绑定 CSS transform、宽度或高度。组件来处理元素进入、离开和列表顺序变化的过渡效果。但除此之外，还有许多其他制作网页动画的方式在 Vue 应用中也适用。这里我们会探讨一些额外的技巧。通过发挥一些创意，我们可以基于一些数字状态，配合侦听器给任何东西加上动画。有些过渡效果可以通过动态插值来实现，比如在交互时动态地给元素绑定样式。

​Vue在 Custom Elements Everywhere 测试中取得了 100% 的分数。​自定义元素的主要好处是，它们可以在使用任何框架，甚至是在不使用框架的场景下使用。当你面向的最终用户可能使用了不同的前端技术栈，或是当你希望将最终的应用与它使用的组件实现细节解耦时，它们会是理想的选择。​也可以搭配 Vue 单文件组件 (SFC) 使用。但是，根据默认的工具链配置，SFC 中的在生产环境构建时仍然会被抽取和合并到一个单独的 CSS 文件中。

​可以使用将自定义指令应用于 vnode：js// 自定义指令])当一个指令是以名称注册并且不能被直接导入时，可以使用函数来解决这个问题。

Vue 编译器自动地会提升这部分 vnode 创建函数到这个模板的渲染函数之外，并在每次渲染时都使用这份相同的 vnode，渲染器知道新旧 vnode 在这部分是完全相同的，所以会完全跳过对它们的差异比对。虚拟 DOM (Virtual DOM，简称 VDOM) 是一种编程概念，意为将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的 DOM 与之保持同步。如果我们有两份虚拟 DOM 树，渲染器将会有比较地遍历它们，找出它们之间的区别，并应用这其中的变化到真实的 DOM 上。

​这个术语在今天的各种编程讨论中经常出现，但人们说它的时候究竟是想表达什么意思呢？本质上，响应性是一种可以使我们声明式地处理变化的编程范式。ABC011223这里单元格 A2 中的值是通过公式= A0 + A1来定义的 (你可以在 A2 上点击来查看或编辑该公式)，因此最终得到的值为 3，正如所料。但如果你试着更改 A0 或 A1，你会注意到 A2 也随即自动更新了。而 JavaScript 默认并不是这样的。如果我们用 JavaScript 写类似的逻辑：jslet A0 = 1。

​组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。响应式 API：例如ref()和reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如和，使我们可以在组件各个生命周期阶段添加逻辑。依赖注入：例如provide()和inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。组合式 API 是 Vue 3 及Vue 2.7的内置功能。

这个方式让你能够在不需要顾虑最终使用场景的情况下使用 Vue：因为生成的 Web Component 可以嵌入到旧应用、静态 HTML，甚至用其他框架构建的应用中。如果你的后端框架已经渲染了大部分的 HTML，或者你的前端逻辑并不复杂，不需要构建步骤，这是最简单的使用 Vue 的方式。正因如此，Vue 被设计成一个灵活的、可以渐进式集成的框架。纯客户端的 SPA 在首屏加载和 SEO 方面有显著的问题，因为浏览器会收到一个巨大的 HTML 空页面，只有等到 JavaScript 加载完毕才会渲染出内容。

​某些插件，比如vue-router，提供了一些自定义的组件选项，比如ts// ...})如果没有确切的类型标注，这个钩子函数的参数会隐式地标注为any类型。我们可以为接口扩展自定义的选项来支持：ts现在这个选项会被准确地标注类型。注意这只是一个例子——像vue-router这种类型完备的库应该在它们自己的类型定义中自动执行这些扩展。这种类型扩展和全局属性扩展受到相同的限制。对组件类型扩展的 TypeScript 单元测试。

如果您有疑问，请观看视频教程《Vue3实战教程》TypeScript 与组合式 API​这一章假设你已经阅读了搭配 TypeScript 使用 Vue的概览。为组件的 props 标注类型​使用<script setup>​当使用<script setup>时，defineProps()宏函数支持从它的参数中推导类型：vue<script setup lang="ts">const props = defineProps(

在基于 Vite 的配置中，开发服务器和打包器将只会对 TypeScript 文件执行语法转译，而不会执行任何类型检查，这保证了 Vite 开发服务器在使用 TypeScript 时也能始终保持飞快的速度。Vue 本身就是用 TypeScript 编写的，并对 TypeScript 提供了一等公民的支持。所有的 Vue 官方库都自带了类型声明文件，开箱即用。(之前是 Volar) 是官方的 VS Code 扩展，提供了 Vue 单文件组件中的 TypeScript 支持，还伴随着一些其他非常棒的特性。

尽管这些表达式在特定的渲染环境中执行，但由于全局执行环境的复杂性，Vue 作为一个开发框架，要在性能开销合理的前提下完全避免潜在的恶意代码执行是不现实的。此外，允许用户编写自己的 Vue 模板也会带来类似的危险。用户提供的 JavaScript 永远不能被认为是 100% 安全的，除非它在 iframe 这样的沙盒环境中，或者该段代码只会在该用户登录的页面上被执行。接着你可以利用学到的知识，来审查依赖项的源代码，看看是否有潜在的危险，防止它们中的任何一个以第三方组件或其他方式影响 DOM 渲染的内容。

Web 无障碍访问 (也称为 a11y) 是指创建可供任何人使用的网站的做法——无论是身患某种障碍、通过慢速的网络连接访问、使用老旧或损坏的硬件，还是仅处于某种不方便的环境。同样地，确保文字样式没有处于太低的对比度，可以对低视力用户和在明亮的强光下使用手机的用户都有所帮助。不要在可聚焦的元素上使用它，请只在装饰性的、重复的或屏幕外的内容上使用它。你应该在每个页面的顶部添加一个直接指向主内容区域的链接，这样用户就可以跳过在多个网页上重复的内容。的，它将应用于表单中的所有 input 框。

​Vue 在大多数常见场景下性能都是很优秀的，通常不需要手动优化。然而，总会有一些具有挑战性的场景需要进行针对性的微调。在本节中，我们将讨论用 Vue 开发的应用在性能方面该注意些什么。页面加载性能：首次访问时，应用展示出内容与达到可交互状态的速度。这通常会用 Google 所定义的一系列Web 指标(Web Vitals) 来进行衡量，如最大内容绘制(Largest Contentful Paint，缩写为 LCP) 和首次输入延迟(First Input Delay，缩写为 FID)。更新性能。

然而，这些功能在生产环境中并不会被使用，一些警告检查也会产生少量的性能开销。当部署到生产环境中时，我们应该移除所有未使用的、仅用于开发环境的代码分支，来获得更小的包体积和更好的性能。如果你没有使用任何构建工具，而是从 CDN 或其他源来加载 Vue，请确保在部署时使用的是生产环境版本（以。（基于 Vite）或是 Vue CLI（基于 webpack）搭建的项目都已经预先做好了针对生产环境的配置。生产环境版本会被最小化，并移除了所有仅用于开发环境的代码分支。等服务也为 Vue 提供了官方集成。

​Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。然而，Vue 也支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。一个由服务端渲染的 Vue.js 应用也可以被认为是“同构的”(Isomorphic) 或“通用的”(Universal)，因为应用的大部分代码同时运行在服务端和客户端。​。

尽管理想情况应该是 100% 的跨浏览器覆盖率，但很重要的一点是跨浏览器测试对团队资源的回报是递减的，因为需要额外的时间和机器来持续运行它们。因此，当错误发生时，现代端到端测试框架的一个关键特性是能够在不同的测试阶段查看应用的快照、视频，从而深入了解错误的原因。组件的最终工作是渲染正确的 DOM 输出，所以专注于 DOM 输出的测试提供了足够的正确性保证（如果你不需要更多其他方面测试的话），同时更加健壮、需要的改动更少。端到端测试的重点是多页面的应用表现，针对你的应用在生产环境下进行网络请求。

​理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了。我们以一个简单的计数器组件为例：vue// 状态// 动作</script>-- 视图 -->状态：驱动整个应用的数据源；视图：对状态的一种声明式映射；交互：状态根据用户在视图中的输入而作出相应变更的可能方式。下面是“单向数据流”这一概念的简单图示：然而，当我们有多个组件共享一个共同的状态多个视图可能都依赖于同一份状态。来自不同视图的交互也可能需要更改同一份状态。

中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。在这类单页应用中，“路由”是在客户端执行的。Vue 很适合用来构建单页面应用。

​自定义块被编译成导入到同一 Vue 文件的不同请求查询。这取决于底层构建工具如何处理这类导入请求。如果使用 Vite，需使用一个自定义 Vite 插件将自定义块转换为可执行的 JavaScript 代码。示例。如果使用 Vue CLI 或只是 webpack，需要使用一个 loader 来配置如何转换匹配到的自定义块。示例。

color: red;

是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。在最坏的情况下，我们可能会在页面上看到三个旋转的加载态，在不同的时间显示出内容。组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。例如，可以使用这些事件在加载新组件时在之前的 DOM 最上层显示一个加载指示器。在这个组件树中有多个嵌套组件，要渲染出它们，首先得解析一些异步资源。将在内存中渲染其默认的插槽内容。

有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。在切换时创建新的组件实例通常是有意义的，但在这个例子中，我们的确想要组件能在被“切走”的时候保留它们的状态。：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。在下面的例子中，你会看到两个有状态的组件——A 有一个计数器，而 B 有一个通过。是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。缓存的根组件，也适用于缓存树中的后代组件。

​你还可以通过向传递moveClassprop 为移动元素指定自定义过渡 class，类似于自定义过渡 class。

如果您有疑问，请观看视频教程《Vue3实战教程》

​插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例：js/* 可选的选项 */})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给app.use()的额外选项作为参数：js// 配置此应用插件没有严格定义的使用范围，但是插件发挥作用的常见场景主要包括以下几种：通过和注册一到多个全局组件或自定义指令。通过使一个资源可被注入进整个应用。向中添加一些全局实例属性或方法。

​​除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。组件和组合式函数。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。

​在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的lodash或是date-fns。相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。

​ts// forEachElement 是一个遍历组件未激活的 DOM 中所有根元素的辅助函数，// 因为根元素可能是一个片段而非单个元素// ...})// 准备好时调用 `hydrate`hydrate()// 如必要，返回一个销毁函数})

想象一下这样的结构：有一些多层级嵌套的组件，形成了一棵巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。但如果你正在构建大型的应用，包含非常多的依赖提供，或者你正在编写提供给其他开发者使用的组件库，建议最好使用 Symbol 来作为注入名以避免潜在的冲突。有的时候，我们可能需要在注入方组件中更改数据。在应用级别提供的数据在该应用内的所有组件中都可以注入。最后，如果你想确保提供的数据不能被注入方的组件更改，你可以使用。如果提供的值是一个 ref，注入进来的会是该 ref 对象，而。

现在我们要再次使用一下中的组件例子。有时候我们可能为了样式，需要在元素外包装一层template我们想要所有像class和v-on监听器这样的透传 attribute 都应用在内部的上而不是外层的上。我们可以通过设定和使用来实现：template会将一个对象的所有属性都作为 attribute 应用到目标元素上。

这两个选项在从模型引用中读取或设置值时会接收到当前的值，并且它们都应该返回一个经过处理的新值。返回的值是一个 ref。值且父组件没有为该 prop 提供任何值，会导致父组件与子组件之间不同步。在下面的示例中，父组件的。小节中学到的指定参数与事件名的技巧，我们可以在单个组件实例上创建多个。把这个 ref 绑定到一个原生 input 元素上，在提供相同的。这里是另一个例子，展示了如何在使用多个不同参数的。在某些场景下，你可能想要一个自定义组件的。的返回值，可以在子组件中访问添加到组件。

注意这里我们触发了一个以 camelCase 形式命名的事件，但在父组件中可以使用 kebab-case 形式来监听。尽管事件声明是可选的，我们还是推荐你完整地声明所有要触发的事件，以此在代码中作为文档记录组件的用法。平级组件或是跨越多层嵌套的组件间通信，应使用一个外部的事件总线，或是使用一个。和对 props 添加类型校验的方式类似，所有触发的事件也可以使用对象形式来描述。要为事件添加校验，那么事件可以被赋值为一个函数，接受的参数就是抛出事件时传入。和原生 DOM 事件不一样，组件触发的事件。

因为在编译时整个表达式都会被移到外部的函数中。一些补充细节：所有 prop 默认都是可选的，除非声明了。

如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。相比之下，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。在父组件中使用子组件时，不太容易定位子组件的实现。对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现。这让我们能够使用同样的 JavaScript 组件注册代码来配合不同来源的模板。注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。所有的子组件也可以使用全局注册的组件，这意味着这三个组件也都可以在。

​当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的.vue文件中，这被叫做单文件组件(简称 SFC)：vue当不使用构建步骤时，一个 Vue 组件以一个包含 Vue 特定选项的 JavaScript 对象来定义：jssetup() {},`// 也可以针对一个 DOM 内联模板：这里的模板是一个内联的 JavaScript 字符串，Vue 将会在运行时编译它。你也可以使用 ID 选择器来指向一个元素 (通常是原生的。

完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，或在一个元素上初始化一个第三方库。虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。绑定才能够传入一个函数。

然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。另外，仅在数据源确实改变时才会触发回调。可能会比深度侦听器更有效，因为它将只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性。会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。