Vue 3 Composition API 最佳实践
Vue 3 Composition API 最佳实践是开发中常用的技术工具或方法。本文从实际应用出发介绍核心概念和操作步骤帮助读者快速上手并掌握关键技巧。
Vue 3 中模板 ref 的声明方式
<script setup> 中变量名和模板 ref 名称一致自动绑定。组件上使用 ref 获取组件实例需要子组件 defineExpose 暴露属性和方法。
Vue 3 中事件修饰符 prevent stop capture
@click.prevent 阻止默认行为@click.stop 停止冒泡@click.capture 在捕获阶段触发。多个修饰符可以连用。本文展示各个修饰符的效果。
Vue 3 中 watch 监听多个数据源
watch([count, name], ([newCount, newName], [oldCount, oldName]) 同时监听多个数据源。任一变化都触发回调闭包。
Vue 3 中 onMounted 和 onUnmounted 的使用
onMounted 在组件挂载到 DOM 后执行onUnmounted 在组件卸载前执行。在 setup 中调用可以在多个生命周期函数中组织相关逻辑。
Vue 3 中 v-if 和 v-show 的渲染差异
v-if 条件为假时元素从 DOM 中完全移除条件切换时重建组件状态会丢失。v-show 只是切换 display:none 元素始终在 DOM 中。切换频繁用 v-show。
Vue 3 中 markRaw 阻止对象转为响应式
markRaw 标记一个对象永远不会被转换为响应式。适合不需要响应式的大对象或第三方实例避免响应式系统的开销。
Vue 3 中 provide/inject 结合响应式数据
provide 传入响应式 ref/reactive 数据子组件 inject 后可以直接使用和修改。实现跨层级的状态共享比 props 逐层传递更简洁。
Vue 3 中 toRef 和 toRefs 的使用
toRef 将 reactive 对象的单个属性转为 ref 保持响应式。toRefs 将整个 reactive 对象的所有属性转为 ref 方便解构。本文展示两者的区别。
Vue 3 中 defineAsyncComponent 异步组件
defineAsyncComponent 定义异步组件在需要时加载支持 loading 和 error 组件以及延迟时间。搭配 Suspense 使用可以提供完整的加载体验。
Vue 3 中组合式函数 Composition Function 封装逻辑
组合式函数是用 Composition API 封装可复用逻辑的函数。useMouse 和 useFetch 是常见例子。比 mixin 更清晰没有命名冲突。
Vue 3 watchEffect 和 watch 的区别
watchEffect 自动追踪使用的响应式数据依赖变化就执行。watch 需要明确指定监听的数据源。watchEffect 在组件创建时立即执行一次。
Vue 3 动态组件 component is
<component :is="currentComponent"> 动态切换组件。配合 keep-alive 缓存切换后的组件状态避免重复渲染。本文展示 Tab 切换场景的用法。
Vue 3 中 style scoped 和深度选择器 deep
scoped 样式默认只作用于当前组件无法影响子组件的根元素。用 :deep(.class-name) 穿透 scoped 限制修改子组件样式。本文展示深度选择器的写法。
Vue 3 中 CSS Modules 的使用
Vue 3 的样式作用域可以用 scoped 或 CSS Modules。scoped 通过属性选择器实现CSS Modules 通过类名哈希。本文对比两种方案的适用场景。
Vue 3 组件 v-model 多个绑定
Vue 3 允许一个组件有多个 v-model 绑定每个 v-model 带一个参数区分。v-model:title 和 v-model:content 分别绑定不同的值。本文用表单组件演示多 v-model。
Vue 3 v-model 在自定义组件上的双向绑定
Vue 3 自定义组件用 v-model 需要子组件声明 modelValue props 并 emit update:modelValue 事件。defineModel 宏简化了这个过程。本文展示两种写法。
Vue 3 provide inject 跨级组件通信
provide/inject 让祖先组件向所有子孙组件注入依赖不需要逐层传递 props。适合主题和用户信息等全局配置。本文对比 provide/inject 和 props 逐层传递的代码量差异。
Vue 3 中 nextTick 的正确使用场景
Vue 的数据更新是异步的修改响应式数据后 DOM 不会立即更新。nextTick 在 DOM 更新完成后执行回调适合操作更新后的 DOM。本文展示 nextTick 在表单验证中的用法。
Vue 3 Teleport 搭配 Transition 实现弹窗动画
Teleport 渲染到 body 后 Transition 动画仍然可以正常生效因为 Vue 的动画系统不依赖 DOM 层级。本文实现一个带入场和出场动画的 Modal 组件。
Vue 3 向组件传递多个属性用 v-bind 对象语法
v-bind="obj" 可以把一个对象的所有属性一次性传给子组件比逐个写 props 更简洁。适合传递配置对象或从 API 拿到的数据。本文展示 v-bind 对象语法的具体用法。
Vue 3 computed 和 watch 使用场景划分
computed 根据已有数据计算出新值有缓存依赖不变不执行。watch 监听数据变化执行副作用适合异步操作和 DOM 操作。本文用搜索过滤和表单提交两个案例区分它们的职责。
Vue 3 defineEmits 和 emits 选项的区别
Vue 3 的 defineEmits 是 script setup 语法中声明事件的宏emits 是 options API 中的写法。defineEmits 有更好的类型推导。本文对比两种写法的使用场景。
Vue 3 Teleport 把弹窗渲染到 body
Vue 3 Teleport 把弹窗渲染到 body是开发中经常遇到的问题。本文从实际场景出发分析原因并给出可操作的解决方案适合正在排查这个问题的开发者参考。
Pinia 状态管理
使用 Pinia 定义 Store，通过 setup 风格或选项风格管理全局状态，并集成 Devtools。