Github

Vue

open-source front-end JavaScript library for building user interface

Vue is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces.

The major features of Vue are:

  1. Virtual DOM: It uses virtual DOM similar to other existing frameworks such as React. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the original DOM.

  2. Components: Used to create reusable custom elements

  3. Templates: VueJS provides HTML based templates that bind the DOM with the Vue instance data

  4. Routing: Navigation between pages is achieved through vue-router

  5. Light weight: VueJS is light weight library compared to other frameworks.

Composition API vs Options API

The Options API is the traditional and original way of defining Vue components. In this approach, you define your component using various options, such as data, methods, computed, watch, etc., inside a single object.

The Composition API is a new and optional way to organize and reuse logic in your components. It provides a set of functions that can be used inside the setup function of a component. This allows you to organize your component logic based on features rather than options.

  1. Reactivity in Composition API:
  • In the Options API, reactivity is achieved by using the data function to return an object.
  • In the Composition API, you use functions like ref and reactive to create reactive data.
  1. Organization of Logic:
  • Options API organizes logic based on options like data, methods, computed, etc.
  • Composition API encourages organizing logic based on features, making it easier to reuse and understand.
  1. Readability and Maintainability:
  • Composition API is often considered more readable and maintainable for larger and more complex components.
  1. Code Reusability:
  • Composition API promotes better code reuse by allowing you to extract logic into functions and use them across components.
  1. TypeScript Support:
  • Composition API has better support for TypeScript, making it easier to write strongly typed Vue components.