Vue3 Composition vs Options API

Limitations of Options Api

Large complex components are hard to read and maintain
Logical features are organized by component options. These Options are:
- components
- props
- data
- computed
- methods
- lifecycle methods
Code reusability becomes complex as it involves using Mixins or Mixin factories for code sharing.
Limited typescript support
Internally options api is built on top of composition api. All const values defined on within data are available inside the template without explicitly returning them.

<template>
  <div>{{ msg }}</div>
  <input v-model="msg" />
  <!-- msg variable does support two-way binding  -->
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello Options!!',
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

Composition API

Organizing code without using component options like data, methods etc.
Composition api uses single setup hook within which reusable composable components can be imported allowing developers to group components by logical concerns.
Composable Components makes the code easily reusable.
Not everything in composition api is reactive by default. Reactivity needs to be opt in with use of ref, reactive. Reactive code can now be written outside of the vue component scope.
Composition api methods:
- ref: used for primitive values eg: number string
- reactive: can not be used for primitive values preferred to be used on complex values
- watch: observe when values changed and perform side effects based on that, it provides current and previous values
- watchEffect: it’s an accepts anonymous function as an argument and capable of watching any reactive variable.
Explicitly need to mention variables returned to the template

<template>
  <div>{{ msg }}</div>
  <input v-model="msg" />
  <!-- msg variable does not support two-way binding   -->
  <button @click="increment">{{ count }}</button>
  <!-- ref unwrapping .value happens in the background -->
  <button @click="increase('a')">{{ numbers.a }}</button>
  <button @click="increase('b')">{{ numbers.b }}</button>

  <p>{{ total }}</p>
</template>

<script>
import { computed, ref, reactive } from 'vue';
export default {
  setup() {
    const msg = ref('Hello'); // opt-in reactivity by using ref

    const count = ref(0); // need to use value to modify object value

    // ref -> string, number values
    // reactive -> objects and complex values

    const numbers = reactive({
      a: 0,
      b: 0,
    });

    const increment = () => {
      count.value++;
    };

    const increase = (n) => {
      numbers[n]++;
    };

    const total = computed(() => {
      return count.value + numbers.a + numbers.b;
    });

    return {
      count,
      increment,
      increase,
      msg,
      numbers,
      total,
    };
  },
};
</script>

keep dabbling…

Leave a comment Cancel reply