Thursday 18 January 2024

What are functional components in Vuejs explain with example? 073

 What are functional components in Vuejs explain with example?

Functional components in Vue.js are a component type that focuses primarily on rendering the UI without managing any internal state or instance lifecycle hooks. They offer a more concise and declarative approach to building components, especially for simpler UI elements.

Key Characteristics:

  • Pure Functions: They are essentially JavaScript functions that accept props as input and return JSX-like virtual DOM structures.

  • No State: They don't have their own internal state (data, computed properties, watchers).

  • No Lifecycle Hooks: They don't have access to Vue's lifecycle hooks like created, mounted, etc.

  • Single-File Components: Can be defined using the <script setup> syntax in single-file components (SFCs).


Code snippet

<script setup>
function HelloWorld({ name }) {
  return <h1>Hello, {name}!</h1>;

  <HelloWorld name="Vue" />


  • Readability: Often lead to cleaner and more concise code, especially for presentational components.

  • Performance: Can potentially have minor performance benefits due to less overhead.

  • Reusability: Easier to create reusable UI elements without managing state or lifecycle.

  • Testability: Generally easier to test.

When to Use:

  • Presentational Components: Simple components that primarily render UI based on props.

  • Reusable UI Elements: Components that render common UI patterns without complex logic.

  • Code Organization: Breaking down larger components into smaller, more manageable parts.

When to Avoid:

  • Stateful Components: Components that need to manage their own internal state or react to lifecycle events.

  • Logic-Heavy Components: Components with complex logic or interactions.


  • Composition API: Often used in conjunction with the Composition API for managing logic and state outside of components.

  • Single-File Components: Require the <script setup> syntax in SFCs.

  • Trade-offs: Balance readability, maintainability, and flexibility when choosing between functional and regular components.

No comments:

Post a Comment

Note: only a member of this blog may post a comment.