12 2023 档案
内置组件-Teleport
摘要：介绍 <Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 基本用法 有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。
内置组件-TransitionGroup
摘要：介绍 <TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 和 <Transition> 的区别 <TransitionGroup> 支持和 <Transition> 基本相同的 props、CSS 过渡 class 和 J
内置组件-Transition
摘要：介绍 <Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发： 由 v-if 所触发的切换 由 v-show 所触发的切换 由特殊元素 切换的动态组件 改变特殊的
vue插件
摘要：介绍 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例 import { createApp } from 'vue' const app = createApp({}) app.use(myPlugin, { /* 可选的选项 */ }) 一个插
自定义指令
摘要：介绍 除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。 我们已经介绍了两种在 Vue 中重用代码的方式：组件和组合式函数。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自
组合式函数hook
摘要：什么是“组合式函数”？ 在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。类似与vue2中mixin（混入） 当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用
异步组件与Suspense
摘要：基本用法 在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能： import { defineAsyncComponent } from 'vue' const AsyncComp = def
依赖注入
摘要：解决的问题 祖孙组件传值 Provide (提供) 要为组件后代提供数据，需要使用到 provide() 函数： <script setup> import { provide } from 'vue' provide(/* 注入名 */ 'message', /* 值 */ 'hello!') <
组件v-model
摘要：原理 当使用在一个组件上时，v-model 会被展开为如下的形式： <CustomInput :model-value="searchText" @update:model-value="newValue => searchText = newValue" /> 要让这个例子实际工作起来，<Cust
emit事件
摘要：命名规则 同props一样,模板上使用连字符，script中使用小驼峰。 <MyComponent @some-event.once="callback" /> 声明触发的事件 组件可以显式地通过 defineEmits() 宏来声明它要触发的事件： <script setup> defineEmi
props
摘要：单向数据流 所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。 另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这
