nibabaoo的博客

是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去

Vue中KeepAlive组件详细分析

Vue内置组件TransitionGroup详细介绍

Vue中Transition组件详细介绍

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码

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

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

Suspense>是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

如果提供了一个加载组件，它将在内部组件加载时先行显示。在加载组件显示之前有一个默认的 200ms 延迟——这是因为在网络状况较好时，加载完成得很快，加载组件和最终组件之间的替换太快可能产生闪烁，反而影响用户感受。是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件，所以你可以使用这个异步的包装组件无缝地替换原始组件，同时实现延迟加载。如果提供了一个报错组件，则它会在加载器函数返回的 Promise 抛错时被渲染。异步组件可以搭配内置的。

想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。但如果你正在构建大型的应用，包含非常多的依赖提供，或者你正在编写提供给其他开发者使用的组件库，建议最好使用 Symbol 来作为注入名以避免潜在的冲突。对象上的每一个属性，后代组件会用其 key 为注入名查找期望注入的值，属性的值就是要提供的数据。，注入的属性会以同名的 key 暴露到组件实例上。在上面的例子中，提供的属性名为。在应用级别提供的数据在该应用内的所有组件中都可以注入。

插槽内容与出口​在之前的章节中，我们已经了解到组件能够接收任意类型的 JavaScript 值作为 props，但组件要如何接收模板内容呢？在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。举例来说，这里有一个<FancyButton>组件，可以像这样使用：<FancyButton> Click me! <!-- 插槽内容 --></FancyButton>而<FancyButto

最常见的需要禁用 attribute 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。有下面这样的多根节点模板，由于 Vue 不知道要将 attribute 透传到哪里，所以会抛出一个警告。和单根节点组件有所不同，有着多个根节点的组件没有自动 attribute 透传行为。“透传 attribute”指的是传递给一个组件，却没有被该组件声明为。attribute，它会和从父组件上继承的值合并。

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

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

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

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

​当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的.vue文件中，这被叫做单文件组件setup() {},`// 也可以针对一个 DOM 内联模板：这里的模板是一个内联的 JavaScript 字符串，Vue 将会在运行时编译它。你也可以使用 ID 选择器来指向一个元素 (通常是原生的元素)，Vue 将会使用其内容作为模板来源。上面的例子中定义了一个组件，并在一个.js。

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的ref是一个特殊的 attribute，和v-for章节中提到的key类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个 input 元素上，或在一个元素上初始化一个第三方库。

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。在组合式 API 中，我们可以使用。

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

但有时我们可能希望将该值绑定到当前组件实例上的动态数据。同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，如果你想要默认自动去除用户输入内容中两端的空格，你可以在。是 Vue 特有的 attributes，仅支持和。还使我们可以将选项值绑定为非字符串的数据类型。如果你想让用户输入自动转换为数字，你可以在。我们也可以将多个复选框绑定到同一个数组或。对于单选按钮，复选框和选择器选项，会在第一个按钮选中时被设为。属性的值会在选中时被设为。，在第二个按钮选中时被设为。处理，那么将返回原始值。

我们可以使用v-on指令 (简写为) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。或。：事件被触发时执行的内联 JavaScript 语句 (与onclick类似)。：一个指向组件上定义的方法的属性名或是路径。

v-forv-for我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用形式的特殊语法，其中items是源数据的数组，而item是迭代项的在v-for块中可以完整地访问父作用域内的属性和变量。v-for也支持使用可选的第二个参数表示当前项的位置索引。注意v-for是如何对应forEach回调的函数签名的。实际上，你也可以在定义v-for对于多层嵌套的v-for，作用域的工作方式和函数的作用域很类似。每个v-for你也可以使用of作为分隔符来替代in。

v-if。

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为class和style都是 attribute，我们可以和其他 attribute 一样使用v-bind将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为class和style的v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，有这样一个包含嵌套数组的对象：我们想根据author这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白它的计算依赖于。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。因此我们推荐使用来描述依赖响应式状态的复杂逻辑。我们在这里定义了一个计算属性。computed()方法期望接收一个 getter 函数，返回值为一个。

是最重要的学习资源，其中包含了详细的教程、示例和 API 参考，让你快速了解 Vue.js 的核心概念和用法。

VueRouter导航守卫--全局前置守卫--教程及深度解析