Vue 2 vs vue 3 - The Differences

#vue #tutorial #webdev #javascript

whats new in vue 3 that developers can start taking advantage of

Vue JS as we all know is great tool to get you up and running with frontend development .

It has got all the things a frontend developer needs in 2023

I have got the privilege of working on Vue 2 couple of months ago and its really amazing framework to work with .

Today what i am going to focus about more is "what are the new things that came in Vue 3 " and are the new features useful to an average Vue developer

_First lets dive into options API _
So as you vue developers know , in vue 2 we are using the good "Options Api" . The Options API is the traditional way of structuring and defining components. It involves defining a component using a set of options.

 data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  }

This above is an example of options api usage .

We also have 'Methods' for functions , props for props (obviously ) , watchers , lifecycle methods like created , mounted , updated etc in Options Api

 watch: {
    message(newVal, oldVal) {
      console.log('Message changed from ' + oldVal + ' to ' + newVal);
    }
  },  

created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  destroyed() {
    console.log('Component destroyed');
  }

Now in Vue 3 , we also have Composition Api

The Composition API is an alternative way of structuring and organizing code within Vue components. It provides a more flexible and scalable approach compared to the Options API. Instead of separating component options into different sections, the Composition API encourages grouping related logic together.

Here are the key concepts and features of the Composition API in Vue 3:

Setup function: In the Composition API, each component consists of a setup function that returns an object containing the component's properties, methods, and other reactive references. The setup function is run before the component is created, allowing you to set up the component's reactive state and define the component's logic.

import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue!',
      count: 0
    });

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

    const doubleCount = computed(() => {
      return state.count * 2;
    });

    return {
      state,
      increment,
      doubleCount
    };
  }
};

Reactive state: The Composition API provides the reactive function, which allows you to create reactive objects. Any changes made to reactive properties will trigger reactivity and update the component's view accordingly.
Computed properties: Computed properties can be created using the computed function. Computed properties are derived values that are automatically updated when their dependencies change.
Methods: You can define component methods within the setup function. These methods can be accessed and used within the component's template or programmatically.
Lifecycle hooks: The Composition API provides lifecycle hooks similar to the Options API. However, they are prefixed with on, such as onMounted, onUpdated, and onUnmounted. These hooks allow you to perform actions at different stages of the component's lifecycle.

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });
  }
};

Ref: The Composition API introduces the ref function, which allows you to create a reactive reference to a value. Refs are particularly useful when dealing with primitive values that need reactivity.
Watch: The Composition API provides the watch function, which allows you to perform operations based on changes to reactive state or refs.

import { watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log('Count changed from ' + oldValue + ' to ' + newValue);
    });

    return {
      count
    };
  }
};

This is the main core difference in vue 2 vs vue 3 which came along and is going to improve code quality and performance of vue. However Options api is not going anywhere , its going to stay as is and will be available in vue 3 as well .

The Other differences include
Reactivity System:
Vue 3 introduces a revamped reactivity system, which is more efficient and performs better compared to Vue 2. The new system, known as the Proxy-based reactivity system, offers improved reactivity tracking, resulting in faster and more accurate updates.

// Vue 2
this.message = 'Hello, Vue!';

// Vue 3
import { reactive } from 'vue';

const state = reactive({ message: 'Hello, Vue!' });

Performance Improvements:
Vue 3 brings significant performance improvements over its predecessor. The virtual DOM (VDOM) algorithm has been optimized to reduce memory allocation and increase rendering speed. The new static tree hoisting technique in Vue 3 eliminates redundant re-rendering of static content, leading to better performance in complex applications.

Smaller Bundle Size:
Vue 3 comes with a smaller bundle size compared to Vue 2. This is achieved through better tree shaking and improved module system. The modular design of Vue 3 allows developers to import only the necessary features, reducing the overall size of the application bundle.

TypeScript Integration:
While Vue 2 had limited TypeScript support, Vue 3 takes full advantage of TypeScript's static typing capabilities. The Vue 3 codebase is written in TypeScript, which ensures better type inference and provides enhanced autocompletion and tooling support for TypeScript users.

Conclusion

The major focus in vue 3 have been performance and optimisation . Well many can argue that composition api is great and everyone should switch to it right away - i can confidentaly say that many would want to stick with options api due to some obvious reasons.
The core differences are Composition API, revamped reactivity system, enhanced performance, smaller bundle sizes, improved TypeScript integration.
While it may take some time to switch to vue 3 , the improvements are worthwhile.

I hope you find this article usefull and i was able to help you in someway .
Checkout my website for more articles that will be coming soon . Jayshahcodes
I am also open for dev articles , if you have a article in mind or want me to write dev articles for you , lets discuss.

Support me here