Back to Details

vue-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Vue 3 best practices, common gotchas, and performance optimization.
Vue 3最佳实践、常见误区与性能优化

Reactivity

响应式

  • Accessing ref() values without .value in scripts → See ref-value-access
  • Destructuring reactive() objects, losing reactivity → See reactive-destructuring
  • Choosing between ref() and reactive() for state → See prefer-ref-over-reactive
  • Accessing refs inside arrays and collections → See refs-in-collections-need-value
  • Large objects or external library data overhead → See shallow-ref-for-performance
  • Using nested refs in template expressions → See template-ref-unwrapping-top-level
  • Comparing reactive objects with === operator → See reactivity-proxy-identity-hazard
  • Library instances breaking in reactive state → See reactivity-markraw-for-non-reactive
  • Expecting watchers to fire for each state change → See reactivity-same-tick-batching
  • Integrating external state management libraries → See reactivity-external-state-integration
  • Deriving state with watchEffect instead of computed → See reactivity-computed-over-watcheffect-mutations
  • 在脚本中不使用.value访问ref()的值 → 查看ref-value-access
  • 解构reactive()对象导致响应性丢失 → 查看reactive-destructuring
  • 为状态选择ref()还是reactive() → 查看prefer-ref-over-reactive
  • 在数组和集合中访问ref → 查看refs-in-collections-need-value
  • 大型对象或外部库数据带来的性能开销 → 查看shallow-ref-for-performance
  • 在模板表达式中使用嵌套ref → 查看template-ref-unwrapping-top-level
  • 使用===运算符比较响应式对象 → 查看reactivity-proxy-identity-hazard
  • 响应式状态中的库实例出现异常 → 查看reactivity-markraw-for-non-reactive
  • 期望监听器在每次状态变化时都触发 → 查看reactivity-same-tick-batching
  • 集成外部状态管理库 → 查看reactivity-external-state-integration
  • 使用watchEffect而非computed派生状态 → 查看reactivity-computed-over-watcheffect-mutations

Computed

计算属性

  • Computed getter is making API calls or mutations → See computed-no-side-effects
  • Mutating computed values causes lost changes unexpectedly → See computed-return-value-readonly
  • Computed property doesn't update when expected → See computed-conditional-dependencies
  • Sorting or reversing arrays destroys original data → See computed-array-mutation
  • Expensive operations running too frequently every render → See computed-vs-methods-caching
  • Trying to pass arguments to computed properties → See computed-no-parameters
  • Complex conditions bloating inline class bindings → See computed-properties-for-class-logic
  • 计算属性的getter中调用API或修改状态 → 查看computed-no-side-effects
  • 修改计算属性的值导致数据意外丢失 → 查看computed-return-value-readonly
  • 计算属性未按预期更新 → 查看computed-conditional-dependencies
  • 排序或反转数组破坏原始数据 → 查看computed-array-mutation
  • 昂贵操作在每次渲染时频繁执行 → 查看computed-vs-methods-caching
  • 尝试向计算属性传递参数 → 查看computed-no-parameters
  • 复杂条件导致内联类绑定臃肿 → 查看computed-properties-for-class-logic

Watchers

监听器

  • Need to watch a reactive object property → See watch-reactive-property-getter
  • Large nested data structures causing performance issues → See watch-deep-performance
  • Dependencies accessed after await not tracking → See watcheffect-async-dependency-tracking
  • Need to access updated DOM in watchers → See watch-flush-timing
  • Uncertain whether to use watch or watchEffect → See watch-vs-watcheffect
  • Duplicating initial calls and watch callbacks → See watch-immediate-option
  • Can't compare old and new values correctly → See watch-deep-same-object-reference
  • Template refs appearing null or stale → See watcheffect-flush-post-for-refs
  • 需要监听响应式对象的属性 → 查看watch-reactive-property-getter
  • 大型嵌套数据结构导致性能问题 → 查看watch-deep-performance
  • await后访问的依赖未被追踪 → 查看watcheffect-async-dependency-tracking
  • 需要在监听器中访问更新后的DOM → 查看watch-flush-timing
  • 不确定使用watch还是watchEffect → 查看watch-vs-watcheffect
  • 重复初始化调用和监听器回调 → 查看watch-immediate-option
  • 无法正确比较新旧值 → 查看watch-deep-same-object-reference
  • 模板ref显示为null或过期值 → 查看watcheffect-flush-post-for-refs

Components

组件

  • Prop values being changed from a child component → See props-are-read-only
  • Grandparent can't listen to grandchild emitted events → See component-events-dont-bubble
  • Distinguishing Vue components from native elements → See component-naming-pascalcase
  • Recursive component needs to reference itself → See self-referencing-component-name
  • Bundle includes components that aren't used → See prefer-local-component-registration
  • Tight coupling through component ref access → See prefer-props-emit-over-component-refs
  • 子组件修改Prop值 → 查看props-are-read-only
  • 祖父组件无法监听孙组件触发的事件 → 查看component-events-dont-bubble
  • 区分Vue组件与原生元素 → 查看component-naming-pascalcase
  • 递归组件需要引用自身 → 查看self-referencing-component-name
  • 打包包含未使用的组件 → 查看prefer-local-component-registration
  • 通过组件ref访问实现紧耦合 → 查看prefer-props-emit-over-component-refs

Props & Emits

Props与事件触发

  • Boolean prop not parsing as expected → See prop-boolean-casting-order
  • Composable doesn't update when props change → See prop-composable-reactivity-loss
  • Destructured props not updating watchers → See prop-destructured-watch-getter
  • Prop validation needs component instance data → See prop-validation-before-instance
  • Event name inconsistency in templates and scripts → See emit-kebab-case-in-templates
  • Event payloads need validation during development → See emit-validation-for-complex-payloads
  • 布尔类型Prop未按预期解析 → 查看prop-boolean-casting-order
  • 组合式函数在Props变化时未更新 → 查看prop-composable-reactivity-loss
  • 解构后的Props无法触发监听器更新 → 查看prop-destructured-watch-getter
  • Prop验证需要组件实例数据 → 查看prop-validation-before-instance
  • 模板与脚本中的事件名称不一致 → 查看emit-kebab-case-in-templates
  • 开发阶段需要验证事件负载 → 查看emit-validation-for-complex-payloads

Templates

模板

  • Rendering untrusted user content as HTML → See v-html-xss-security
  • Filtering or conditionally hiding list items → See no-v-if-with-v-for
  • Functions in templates modifying data unexpectedly → See template-functions-no-side-effects
  • Performance issues with filtered or sorted lists → See v-for-use-computed-for-filtering
  • Deciding between v-if and v-show for conditionals → See v-if-vs-v-show-performance
  • 将不可信用户内容作为HTML渲染 → 查看v-html-xss-security
  • 过滤或条件隐藏列表项 → 查看no-v-if-with-v-for
  • 模板中的函数意外修改数据 → 查看template-functions-no-side-effects
  • 过滤或排序后的列表存在性能问题 → 查看v-for-use-computed-for-filtering
  • 为条件渲染选择v-if还是v-show → 查看v-if-vs-v-show-performance

Forms & v-model

表单与v-model

  • Need to handle v-model modifiers in child → See definemodel-hidden-modifier-props
  • Need to use updated value immediately after change → See definemodel-value-next-tick
  • Migrating Vue 2 components to Vue 3 → See v-model-vue3-breaking-changes
  • 需要在子组件中处理v-model修饰符 → 查看definemodel-hidden-modifier-props
  • 需要在值变更后立即使用更新后的值 → 查看definemodel-value-next-tick
  • 将Vue 2组件迁移到Vue 3 → 查看v-model-vue3-breaking-changes

Events & Modifiers

事件与修饰符

  • Need to handle same event only one time → See event-once-modifier-for-single-use
  • Keyboard shortcuts fire with unintended modifier combinations → See exact-modifier-for-precise-shortcuts
  • Using left-handed mouse or non-standard input devices → See mouse-button-modifiers-intent
  • Preventing default browser action and scroll performance together → See no-passive-with-prevent
  • 需要仅处理一次相同事件 → 查看event-once-modifier-for-single-use
  • 键盘快捷键触发了非预期的修饰符组合 → 查看exact-modifier-for-precise-shortcuts
  • 使用左手鼠标或非标准输入设备 → 查看mouse-button-modifiers-intent
  • 同时阻止默认浏览器行为和滚动性能问题 → 查看no-passive-with-prevent

Lifecycle

生命周期

  • Lifecycle hooks don't execute asynchronously → See lifecycle-hooks-synchronous-registration
  • Expensive operations slow performance drastically → See updated-hook-performance
  • 生命周期钩子无法异步执行 → 查看lifecycle-hooks-synchronous-registration
  • 昂贵操作大幅降低性能 → 查看updated-hook-performance

Slots

插槽

  • Accessing child component data in slot content → See slot-render-scope-parent-only
  • Mixing named and scoped slots together → See slot-named-scoped-explicit-default
  • Using v-slot on native HTML elements → See slot-v-slot-on-components-or-templates-only
  • Empty wrapper elements rendering unnecessarily → See slot-conditional-rendering-with-slots
  • Scoped slot props lack TypeScript type safety → See slot-define-slots-for-typescript
  • Rendering empty component slots without defaults → See slot-fallback-content-default-values
  • Confused about which slot content goes where → See slot-implicit-default-content
  • Expecting name property in scoped slot props → See slot-name-reserved-prop
  • Choosing between renderless components and composables → See slot-renderless-components-vs-composables
  • 在插槽内容中访问子组件数据 → 查看slot-render-scope-parent-only
  • 混合使用具名插槽和作用域插槽 → 查看slot-named-scoped-explicit-default
  • 在原生HTML元素上使用v-slot → 查看slot-v-slot-on-components-or-templates-only
  • 渲染不必要的空包装元素 → 查看slot-conditional-rendering-with-slots
  • 作用域插槽Props缺乏TypeScript类型安全 → 查看slot-define-slots-for-typescript
  • 组件插槽为空时未渲染默认内容 → 查看slot-fallback-content-default-values
  • 不确定插槽内容的放置位置 → 查看slot-implicit-default-content
  • 期望在作用域插槽Props中获取name属性 → 查看slot-name-reserved-prop
  • 在无渲染组件和组合式函数之间做选择 → 查看slot-renderless-components-vs-composables

Provide/Inject

依赖注入(Provide/Inject)

  • String keys collide in large applications → See provide-inject-symbol-keys
  • State mutations scattered across components → See provide-inject-mutations-in-provider
  • Passing props through many component layers → See avoid-prop-drilling-use-provide-inject
  • 大型应用中字符串键冲突 → 查看provide-inject-symbol-keys
  • 状态修改分散在多个组件中 → 查看provide-inject-mutations-in-provider
  • 通过多层组件传递Props → 查看avoid-prop-drilling-use-provide-inject

Attrs

属性透传(Attrs)

  • Accessing hyphenated attributes in JavaScript code → See attrs-hyphenated-property-access
  • Watching fallthrough attributes for changes with watch() → See attrs-not-reactive
  • 在JavaScript代码中访问连字符命名的属性 → 查看attrs-hyphenated-property-access
  • 使用watch()监听透传属性的变化 → 查看attrs-not-reactive

Composables

组合式函数

  • Composable has unexpected side effects affecting external state → See composable-avoid-hidden-side-effects
  • Building complex logic from smaller focused composables → See composable-composition-pattern
  • Inconsistent composable names or destructuring loses reactivity → See composable-naming-return-pattern
  • Composable has many optional parameters or confusing argument order → See composable-options-object-pattern
  • Need to prevent uncontrolled mutations of composable state → See composable-readonly-state
  • Unsure whether logic belongs in composable or utility function → See composable-vs-utility-functions
  • 组合式函数存在影响外部状态的意外副作用 → 查看composable-avoid-hidden-side-effects
  • 从更小的聚焦组合式函数构建复杂逻辑 → 查看composable-composition-pattern
  • 不一致的组合式函数名称或解构导致响应性丢失 → 查看composable-naming-return-pattern
  • 组合式函数有多个可选参数或参数顺序混乱 → 查看composable-options-object-pattern
  • 需要防止组合式函数状态被无控制地修改 → 查看composable-readonly-state
  • 不确定逻辑应放在组合式函数还是工具函数中 → 查看composable-vs-utility-functions

Composition API

组合式API

  • Optimizing production bundle size and performance → See composition-api-bundle-size-minification
  • Composition API code becoming scattered and hard to maintain → See composition-api-code-organization
  • Fixing naming conflicts and unclear data origins in mixins → See composition-api-mixins-replacement
  • Applying functional patterns incorrectly to Vue state → See composition-api-not-functional-programming
  • Gradually migrating large Options API codebase → See composition-api-options-api-coexistence
  • Coming from React, over-engineering Vue patterns unnecessarily → See composition-api-vs-react-hooks-differences
  • 优化生产环境包体积和性能 → 查看composition-api-bundle-size-minification
  • 组合式API代码分散且难以维护 → 查看composition-api-code-organization
  • 修复混入(mixins)中的命名冲突和数据来源不清晰问题 → 查看composition-api-mixins-replacement
  • 错误地将函数式模式应用于Vue状态 → 查看composition-api-not-functional-programming
  • 逐步迁移大型Options API代码库 → 查看composition-api-options-api-coexistence
  • 从React转来，过度设计Vue模式 → 查看composition-api-vs-react-hooks-differences

Directives

指令

  • Storing state across directive hooks → See directive-arguments-read-only
  • Applying custom directives to Vue components → See directive-avoid-on-components
  • Creating intervals or event listeners in directives → See directive-cleanup-in-unmounted
  • Simplifying directives with identical behavior → See directive-function-shorthand
  • Using custom directives in script setup → See directive-naming-v-prefix
  • Choosing between custom and built-in directives → See directive-prefer-declarative-templating
  • Deciding between directives and components → See directive-vs-component-decision
  • Migrating Vue 2 directives to Vue 3 → See directive-vue2-migration-hooks
  • 在指令钩子之间存储状态 → 查看directive-arguments-read-only
  • 将自定义指令应用于Vue组件 → 查看directive-avoid-on-components
  • 在指令中创建定时器或事件监听器 → 查看directive-cleanup-in-unmounted
  • 简化具有相同行为的指令 → 查看directive-function-shorthand
  • 在script setup中使用自定义指令 → 查看directive-naming-v-prefix
  • 在自定义指令和内置指令之间做选择 → 查看directive-prefer-declarative-templating
  • 在指令和组件之间做选择 → 查看directive-vs-component-decision
  • 将Vue 2指令迁移到Vue 3 → 查看directive-vue2-migration-hooks

Transitions

过渡效果

  • Wrapping multiple elements or components in transitions → See transition-single-element-slot
  • Transitioning between same element types without animation → See transition-key-for-same-element
  • Using JavaScript animations without calling done callback → See transition-js-hooks-done-callback
  • Animating lists with TransitionGroup without unique keys → See transition-group-key-requirement
  • Performance problems with janky list animations → See transition-animate-transform-opacity
  • Move animations failing on inline list elements → See transition-group-flip-inline-elements
  • List items jumping instead of smoothly animating → See transition-group-move-animation-position-absolute
  • Vue 2 to Vue 3 transition layout breaks unexpectedly → See transition-group-no-default-wrapper-vue3
  • Trying to sequence list animations with mode prop → See transition-group-no-mode-prop
  • Creating cascading delays for list item animations → See transition-group-staggered-animations
  • Overlapping elements or layout jumping during transitions → See transition-mode-out-in
  • Nested transition animations cutting off prematurely → See transition-nested-duration
  • Reusable transition components with scoped styles breaking → See transition-reusable-scoped-style
  • RouterView transitions unexpectedly animating on page load → See transition-router-view-appear
  • Mixing CSS transitions and animations causing timing issues → See transition-type-when-mixed
  • Component cleanup not firing during fast transition replacements → See transition-unmount-hook-timing
  • 将多个元素或组件包裹在过渡效果中 → 查看transition-single-element-slot
  • 相同元素类型之间的过渡无动画效果 → 查看transition-key-for-same-element
  • 使用JavaScript动画但未调用done回调 → 查看transition-js-hooks-done-callback
  • 使用TransitionGroup动画列表但未提供唯一键 → 查看transition-group-key-requirement
  • 列表动画存在卡顿等性能问题 → 查看transition-animate-transform-opacity
  • 内联列表元素的移动动画失效 → 查看transition-group-flip-inline-elements
  • 列表项跳跃而非平滑动画 → 查看transition-group-move-animation-position-absolute
  • Vue 2迁移到Vue 3后过渡布局意外破坏 → 查看transition-group-no-default-wrapper-vue3
  • 尝试使用mode属性为列表动画排序 → 查看transition-group-no-mode-prop
  • 为列表项动画创建级联延迟 → 查看transition-group-staggered-animations
  • 过渡期间元素重叠或布局跳跃 → 查看transition-mode-out-in
  • 嵌套过渡动画提前终止 → 查看transition-nested-duration
  • 带作用域样式的可复用过渡组件失效 → 查看transition-reusable-scoped-style
  • RouterView过渡在页面加载时意外触发动画 → 查看transition-router-view-appear
  • 混合使用CSS过渡和动画导致时序问题 → 查看transition-type-when-mixed
  • 快速过渡替换期间组件清理未触发 → 查看transition-unmount-hook-timing

Animation

动画

  • Need to animate elements staying in DOM → See animation-class-based-technique
  • Animations not triggering on content changes → See animation-key-for-rerender
  • Building interactive animations with user input → See animation-state-driven-technique
  • Animating list changes causing noticeable lag → See animation-transitiongroup-performance
  • 需要动画化保留在DOM中的元素 → 查看animation-class-based-technique
  • 内容变化时动画未触发 → 查看animation-key-for-rerender
  • 构建带用户交互的动画 → 查看animation-state-driven-technique
  • 列表变化动画导致明显延迟 → 查看animation-transitiongroup-performance

KeepAlive

KeepAlive缓存

  • Using KeepAlive without proper cache limits or cleanup → See keepalive-memory-management
  • KeepAlive include/exclude props not matching cached components → See keepalive-component-name-requirement
  • Need to programmatically remove component from KeepAlive cache → See keepalive-no-cache-removal-vue3
  • Users see stale cached content when expecting fresh page data → See keepalive-router-fresh-vs-cached
  • Child components mount twice with nested Vue Router routes → See keepalive-router-nested-double-mount
  • Memory grows when combining KeepAlive with Transition animations → See keepalive-transition-memory-leak
  • Dynamic component state resets when switching between them → See dynamic-components-with-keepalive
  • 使用KeepAlive但未设置合适的缓存限制或清理机制 → 查看keepalive-memory-management
  • KeepAlive的include/exclude属性与缓存组件不匹配 → 查看keepalive-component-name-requirement
  • 需要以编程方式从KeepAlive缓存中移除组件 → 查看keepalive-no-cache-removal-vue3
  • 用户看到过期的缓存内容而非最新页面数据 → 查看keepalive-router-fresh-vs-cached
  • 嵌套Vue Router路由导致子组件挂载两次 → 查看keepalive-router-nested-double-mount
  • 结合KeepAlive和过渡动画导致内存增长 → 查看keepalive-transition-memory-leak
  • 动态组件切换时状态重置 → 查看dynamic-components-with-keepalive

Async Components

异步组件

  • Setting up Vue Router route component loading → See async-component-vue-router
  • Async component options ignored by parent Suspense → See async-component-suspense-control
  • Improving Time to Interactive with SSR apps → See async-component-hydration-strategies
  • Loading spinner flashing on fast networks → See async-component-loading-delay
  • 设置Vue Router路由组件加载 → 查看async-component-vue-router
  • 父级Suspense忽略异步组件选项 → 查看async-component-suspense-control
  • 提升SSR应用的交互时间 → 查看async-component-hydration-strategies
  • 快速网络下加载闪烁 → 查看async-component-loading-delay

Render Functions

渲染函数

  • Render function from setup doesn't update reactively → See rendering-render-function-return-from-setup
  • Same vnode appearing multiple times in tree → See render-function-vnodes-must-be-unique
  • Rendering lists in render functions without keys → See render-function-v-for-keys-required
  • Implementing .stop, .prevent in render functions → See render-function-event-modifiers
  • Two-way binding on components in render functions → See render-function-v-model-implementation
  • Using string names for components in render functions → See rendering-resolve-component-for-string-names
  • Accessing vnode internals like el or shapeFlag → See render-function-avoid-internal-vnode-properties
  • Creating simple stateless presentational components → See render-function-functional-components
  • Applying custom directives in render functions → See render-function-custom-directives
  • Excessive rerenders from watchers or deep watchers → See rendering-excessive-rerenders-watch-vs-computed
  • Choosing render functions over templates → See rendering-prefer-templates-over-render-functions
  • Migrating Vue 2 render functions to Vue 3 → See rendering-render-function-h-import-vue3
  • Passing slot content to h() incorrectly → See rendering-render-function-slots-as-functions
  • Understanding Vue's vdom optimization blocks → See rendering-understand-vdom-block-structure
  • setup返回的渲染函数未响应式更新 → 查看rendering-render-function-return-from-setup
  • 同一vnode多次出现在树中 → 查看render-function-vnodes-must-be-unique
  • 在渲染函数中渲染列表但未提供键 → 查看render-function-v-for-keys-required
  • 在渲染函数中实现.stop、.prevent修饰符 → 查看render-function-event-modifiers
  • 在渲染函数中实现组件的双向绑定 → 查看render-function-v-model-implementation
  • 在渲染函数中使用字符串名称引用组件 → 查看rendering-resolve-component-for-string-names
  • 访问vnode内部属性如el或shapeFlag → 查看render-function-avoid-internal-vnode-properties
  • 创建简单的无状态展示组件 → 查看render-function-functional-components
  • 在渲染函数中应用自定义指令 → 查看render-function-custom-directives
  • 监听器或深度监听器导致过度重渲染 → 查看rendering-excessive-rerenders-watch-vs-computed
  • 在渲染函数和模板之间做选择 → 查看rendering-prefer-templates-over-render-functions
  • 将Vue 2渲染函数迁移到Vue 3 → 查看rendering-render-function-h-import-vue3
  • 错误地向h()传递插槽内容 → 查看rendering-render-function-slots-as-functions
  • 理解Vue的虚拟DOM优化块 → 查看rendering-understand-vdom-block-structure

Teleport

Teleport传送

  • Modal breaks with parent CSS transforms → See teleport-css-positioning-issues
  • Content needs different layout on mobile → See teleport-disabled-for-responsive
  • Unsure if props/events work through teleport → See teleport-logical-hierarchy-preserved
  • Multiple modals targeting same container → See teleport-multiple-to-same-target
  • Scoped styles not applying to teleported content → See teleport-scoped-styles-limitation
  • 模态框因父级CSS变换失效 → 查看teleport-css-positioning-issues
  • 移动端需要不同布局 → 查看teleport-disabled-for-responsive
  • 不确定Props/事件是否能通过Teleport正常工作 → 查看teleport-logical-hierarchy-preserved
  • 多个模态框指向同一容器 → 查看teleport-multiple-to-same-target
  • 作用域样式未应用于Teleport内容 → 查看teleport-scoped-styles-limitation

Suspense

Suspense异步加载

  • Want to track Suspense loading states programmatically → See suspense-events-for-state-tracking
  • Planning Suspense usage in production applications → See suspense-experimental-api-stability
  • Fallback not showing when content changes → See suspense-fallback-not-immediate-on-revert
  • Nesting Suspense components together → See suspense-nested-suspensible-prop
  • Combining Suspense with Router, Transition, KeepAlive → See suspense-nesting-order-with-router
  • Nested async component not showing loading indicator → See suspense-revert-only-on-root-change
  • Multiple async components in single Suspense → See suspense-single-child-requirement
  • 需要以编程方式追踪Suspense加载状态 → 查看suspense-events-for-state-tracking
  • 在生产应用中规划Suspense的使用 → 查看suspense-experimental-api-stability
  • 内容变化时回退内容未显示 → 查看suspense-fallback-not-immediate-on-revert
  • 嵌套使用Suspense组件 → 查看suspense-nested-suspensible-prop
  • 将Suspense与Router、Transition、KeepAlive结合使用 → 查看suspense-nesting-order-with-router
  • 嵌套异步组件未显示加载指示器 → 查看suspense-revert-only-on-root-change
  • 单个Suspense中包含多个异步组件 → 查看suspense-single-child-requirement

TypeScript

TypeScript集成

  • Declaring props with TypeScript in composition API components → See ts-defineprops-type-based-declaration
  • Providing default values to mutable prop types → See ts-withdefaults-mutable-factory-function
  • Typing reactive state with ref unwrapping concerns → See ts-reactive-no-generic-argument
  • Accessing DOM elements after component mounts → See ts-template-ref-null-handling
  • Typing refs to child Vue components → See ts-component-ref-typeof-instancetype
  • Using custom directives with TypeScript support → See ts-custom-directive-type-augmentation
  • Declaring component events with full type safety → See ts-defineemits-type-based-syntax
  • Handling optional boolean props in TypeScript → See ts-defineprops-boolean-default-false
  • Using imported types safely in defineProps → See ts-defineprops-imported-types-limitations
  • Handling DOM events with strict TypeScript checking → See ts-event-handler-explicit-typing
  • Sharing data between components with type safety → See ts-provide-inject-injection-key
  • Storing Vue components in reactive state → See ts-shallowref-for-dynamic-components
  • Working with union types in Vue templates → See ts-template-type-casting
  • 在组合式API组件中使用TypeScript声明Props → 查看ts-defineprops-type-based-declaration
  • 为可变Prop类型提供默认值 → 查看ts-withdefaults-mutable-factory-function
  • 为响应式状态添加类型时考虑ref解包问题 → 查看ts-reactive-no-generic-argument
  • 组件挂载后访问DOM元素 → 查看ts-template-ref-null-handling
  • 为子Vue组件的ref添加类型 → 查看ts-component-ref-typeof-instancetype
  • 使用带TypeScript支持的自定义指令 → 查看ts-custom-directive-type-augmentation
  • 以完全类型安全的方式声明组件事件 → 查看ts-defineemits-type-based-syntax
  • 在TypeScript中处理可选布尔类型Prop → 查看ts-defineprops-boolean-default-false
  • 在defineProps中安全使用导入的类型 → 查看ts-defineprops-imported-types-limitations
  • 使用严格TypeScript检查处理DOM事件 → 查看ts-event-handler-explicit-typing
  • 以类型安全的方式在组件间共享数据 → 查看ts-provide-inject-injection-key
  • 在响应式状态中存储Vue组件 → 查看ts-shallowref-for-dynamic-components
  • 在Vue模板中使用联合类型 → 查看ts-template-type-casting

SSR

服务端渲染(SSR)

  • User data leaking between server requests → See state-ssr-cross-request-pollution
  • Code runs on both server and browser environments → See ssr-platform-specific-apis
  • Custom directives not displaying on server-rendered HTML → See ssr-custom-directive-getssrprops
  • 用户数据在服务器请求之间泄露 → 查看state-ssr-cross-request-pollution
  • 代码在服务器和浏览器环境中都运行 → 查看ssr-platform-specific-apis
  • 自定义指令未在服务器渲染的HTML中显示 → 查看ssr-custom-directive-getssrprops

Performance

性能优化

  • Many list items re-rendering unnecessarily during state changes → See perf-props-stability-update-optimization
  • Rendering hundreds or thousands of items causing DOM performance issues → See perf-virtualize-large-lists
  • Static content re-evaluated on every parent component update → See perf-v-once-v-memo-directives
  • List performance degrading from deeply nested component structure → See perf-avoid-component-abstraction-in-lists
  • Computed properties returning objects triggering effects unexpectedly → See perf-computed-object-stability
  • Page load metrics suffering from client-side JavaScript execution delay → See perf-ssr-ssg-for-page-load
  • 状态变化时大量列表项不必要地重渲染 → 查看perf-props-stability-update-optimization
  • 渲染数百或数千个项导致DOM性能问题 → 查看perf-virtualize-large-lists
  • 静态内容在父组件每次更新时都被重新计算 → 查看perf-v-once-v-memo-directives
  • 深度嵌套的组件结构导致列表性能下降 → 查看perf-avoid-component-abstraction-in-lists
  • 计算属性返回对象意外触发副作用 → 查看perf-computed-object-stability
  • 客户端JavaScript执行延迟影响页面加载指标 → 查看perf-ssr-ssg-for-page-load

SFC (Single File Components)

单文件组件(SFC)

  • Starting a Vue project with a build setup → See sfc-recommended-for-build-projects
  • Styling child component elements with scoped CSS → See sfc-scoped-css-child-component-styling
  • Styling content added dynamically with v-html → See sfc-scoped-css-dynamic-content
  • Optimizing scoped CSS selector performance → See sfc-scoped-css-performance
  • Styling content passed through component slots → See sfc-scoped-css-slot-content
  • Organizing component template, logic, and styles → See sfc-separation-of-concerns-colocate
  • Binding inline styles with property names → See style-binding-camelcase
  • Building Tailwind classes with string concatenation → See tailwind-dynamic-class-generation
  • 使用构建工具启动Vue项目 → 查看sfc-recommended-for-build-projects
  • 使用作用域CSS为子组件元素设置样式 → 查看sfc-scoped-css-child-component-styling
  • 为使用v-html动态添加的内容设置样式 → 查看sfc-scoped-css-dynamic-content
  • 优化作用域CSS选择器性能 → 查看sfc-scoped-css-performance
  • 为通过组件插槽传递的内容设置样式 → 查看sfc-scoped-css-slot-content
  • 组织组件的模板、逻辑和样式 → 查看sfc-separation-of-concerns-colocate
  • 使用属性名称绑定内联样式 → 查看style-binding-camelcase
  • 通过字符串拼接构建Tailwind类 → 查看tailwind-dynamic-class-generation

Plugins

插件

  • Global properties not available in setup function → See plugin-prefer-provide-inject-over-global-properties
  • Creating a new Vue plugin from scratch → See plugin-structure-install-method
  • Preventing collisions between multiple plugins → See plugin-symbol-injection-keys
  • Global properties missing TypeScript autocomplete support → See plugin-typescript-type-augmentation
  • 全局属性在setup函数中不可用 → 查看plugin-prefer-provide-inject-over-global-properties
  • 从头创建新的Vue插件 → 查看plugin-structure-install-method
  • 防止多个插件之间的冲突 → 查看plugin-symbol-injection-keys
  • 全局属性缺少TypeScript自动补全支持 → 查看plugin-typescript-type-augmentation

App Configuration

应用配置

  • Need to chain app configuration methods after mount → See mount-return-value
  • Vue only controlling specific page sections → See multiple-app-instances
  • Migrating dynamic component registration to Vite → See dynamic-component-registration-vite
  • 需要在mount后链式调用应用配置方法 → 查看mount-return-value
  • Vue仅控制页面的特定部分 → 查看multiple-app-instances
  • 将动态组件注册迁移到Vite → 查看dynamic-component-registration-vite