<KeepAlive>是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。 基本使用一般通过特殊的<component>元素来实现动态组件的用法： <component :is="activeComponent" /> 默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中...

除了Vue内置的一系列指令(如v-model或者v-show等等)之外，Vue还允许注册自定义的指令(Custom Directives)。自定义指令主要是为了重用涉及普通元素的底层DOM访问的逻辑。 一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子，当Vue将元素插入到DOM中后...

Hooks在Vue文档中叫组合式函数。什么是组合式函数，组合式函数是一个利用Vue的组合式API来封装和复用有状态逻辑的函数。 当构建前端应用时，常常需要复用公共任务的逻辑。例如在不同地方格式化时间，可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如lodash或者date...

基本用法在大型项目中，经常需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue提供了defineAsyncComponent方法来实现此功能： import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(...

Prop逐级透传问题通常情况下，当需要从父组件向子组件传递数据时，会使用props。有一些多层级嵌套的组件，形成了一棵巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用props则必须将其沿着组件链逐级传递下去，这会非常麻烦： 注意，虽然这里的<Footer>组件可能根本不关心这些props，但为了使&l...

Attributes继承“透传 attribute”指的是传递给一个组件，却没有被该组件声明为props或emits的attribute或者v-on事件监听器。最常见的例子就是class、style和id。 当一个组件以单个元素为根作渲染时，透传的attribute会自动被添加到根元素上。举例：假如有一个<MyButton>组件，它的模板为： &...

插槽内容与出口组件能够接收任意类型的Javascript值作为props，但组件要如何接收模板内容？想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。 举例：这里有一个<FancyButton>组件，可以像这样使用： <FancyButton> Click me! <!-- 插槽内容 --></Fa...

组件事件监听在编写博客内容的时候，有时候发现它需要能够和父组件交互，比如想要将博客文章内容文字放大，但是其他部分的仍旧使用默认的字号。 在父组件中可以添加一个postFontSize ref来实现这个效果： const posts = ref([ /* ... */])const postFontSize = ref(1) 在模板中使用它来控制所有博客文...

Props如果现在正在构建一个博客，可能需要一个表示博客文章的组件。在博客文章上希望所有的博客都使用相同的视觉布局，但是内容是不同的。要实现这样的效果，自然必须向组件中传递数据，例如每篇文章的标题和内容，这就会使用到props。 props是一种特别的attributes，可以在组件上声明注册。要传递给博客文章组件一个标题，必须在组件的props列表上声明它...

组件允许将UI划分为独立可重用的部分，并且可以对每个部分进行单独的处理。在实际应用中，组件常常被组织成一个层层嵌套的树状结构： 定义组件使用构建步骤当使用构建步骤时，一般会将Vue组件定义在一个单独的.vue文件中，这被叫做单文件组件(SFC)： <script setup>import {ref} from 'v...