Introduction to Vue 3, Its New Features and Composition API

Vue 3 was officially released on September 18 2020 (code‑named “One Piece”), after more than two years of development, over 2 600 commits, 30+ RFCs, 600+ PRs and contributions from 99 developers.

Performance improvements include a 41% reduction in bundle size, a 55% faster initial render, a 133% faster update render, and a 54% reduction in memory usage.

The core source was upgraded: Vue 3 replaces Object.defineProperty with Proxy for reactivity, rewrites the virtual DOM and adds Tree‑Shaking support, and provides first‑class TypeScript integration.

Key new features are delivered through the Composition API: setup() becomes the entry point, ref() creates reactive primitive values, reactive() creates deep reactive objects, computed() defines derived state, watch() and watchEffect() observe changes, and lifecycle hooks are available as composable functions (e.g., onMounted, onBeforeUnmount).

Creating a Vue 3 project can be done with vue create vue_test (Vue‑CLI) or with Vite using npm init vite-app <project-name>, followed by npm install and npm run dev.

Examples of ref and reactive usage:

import { ref } from "vue";<br/>const count = ref(0);

import { reactive } from "vue";<br/>const state = reactive({ name: "Vue", version: 3 });

watch(count, (newVal, oldVal) => { console.log('count changed', newVal, oldVal); }, { immediate: true });

demonstrates the watch API, while watchEffect(() => { console.log(state.name); }); shows the effect‑based watcher.

Additional utilities include toRef / toRefs for exposing single properties, shallowReactive / shallowRef for shallow reactivity, readonly / shallowReadonly for immutable data, markRaw to exclude objects from reactivity, and customRef for building debounced refs.

Vue 3 also introduces new built‑in components: Fragment removes the need for a single root element, Teleport moves markup to a different part of the DOM, and Suspense provides fallback UI while async components load.

Migration changes from Vue 2 include renamed lifecycle hooks ( beforeDestroy → beforeUnmount, destroyed → unmounted), removal of keyCode modifiers and v-on.native, deprecation of filters, and the shift of global APIs from Vue.xxx to the application instance ( app.xxx).