Vue3

Vue.js 3 Best Practices

Core Principles

• Declarative Rendering: Use Vue's template syntax to declaratively bind the DOM to the underlying component state.
• Reactivity: Leverage Vue's reactivity system. Understand how changes to reactive state automatically update the DOM.
• Component-Based: Build interfaces by composing small, reusable components.

API Styles (Options vs. Composition)

• Understand Both: Be familiar with both Options API and Composition API. Choose based on project needs, team preference, or complexity.
  • Options API: Organizes code by options (data, methods, computed, watch, lifecycle hooks). Good for simpler components or class-based mental models.
  • Composition API: Organizes code by logical concern using imported functions (ref, reactive, computed, watch, lifecycle hooks). Excellent for logic reuse (Composables) and managing complex components. Often used with <script setup>.
• Consistency: Maintain consistency in the chosen API style within a project or team if possible.

Single-File Components (SFCs - .vue files)

• Structure: Use SFCs to encapsulate template (<template>), logic (<script> or <script setup>), and styles (<style>) in one file.
• <script setup>: Prefer <script setup> when using Composition API for reduced boilerplate and better TypeScript inference.
• Scoped Styles: Use <style scoped> to limit CSS rules to the current component, preventing global scope pollution.

Component Design

• Keep Components Focused: Design components with a single, clear responsibility.
• Props for Input: Pass data down from parent to child components using props. Define props clearly with types and validation.
• Events for Output: Emit events ($emit) from child components to communicate changes or actions back to the parent.
• Slots for Content Distribution: Use slots to allow parent components to pass template fragments into child components, enhancing flexibility and composition.
• Provide/Inject: Use provide and inject for dependency injection, especially for deeply nested components, but use with caution as it makes components less explicitly coupled.