Vue2 vs Vue3: Differences, New Features, and Migration Guide

Source: Reposted with permission from Frontend Development Enthusiasts (ID: web_share_).

Author: Xiao4zi

Preface

A few days ago I received an interview invitation . The interviewer looked at my résumé and said: Since you are proficient with both Vue 2 and Vue 3, please explain the differences between them and list the new features of Vue 3. The more detailed, the better!

My mind went blank!

For an eight‑year‑veteran front‑end developer, this question feels like the interviewer is questioning my competence.

Perhaps it has been a long time since my last interview, and I have forgotten many of the “standard answers”, although I can still mention several points, such as:

In Vue 3 the Composition API replaces the Vue 2 Options API .

Vue 3 uses the ES6 Proxy API for two‑way data binding, while Vue 2 relies on the ES5 Object.defineProperty() .

Nevertheless, I know that even after many years of work, one must not be careless about technical details.

There are indeed many differences between Vue 2 and Vue 3 , and Vue 3 brings a host of exciting new features .

To answer this question better in the future, I have consulted the relevant documentation and compiled a detailed comparison and analysis, hoping it can help others interested in Vue.

Vue 3 New Feature Overview

Composition API

The Composition API is a new feature of Vue 3 . It provides a more flexible way to organize and reuse logic compared with the traditional Options API . The Composition API handles complex components and logic reuse more effectively.

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
function increment() {
  count.value++;
}
</script>

TypeScript Support

Vue 3 is designed from the start to be compatible with TypeScript , allowing developers to enjoy type checking, auto‑completion and other benefits.

<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const message = ref<string>('Hello, Vue 3!');
    return { message };
  }
});
</script>

Reactive Principle

Vue 2 uses Object.defineProperty to create getters and setters for each property, which captures operations for reactive updates but cannot intercept property addition or deletion in many cases (e.g., array length changes).

Vue 3 implements reactivity with Proxy , an ES6 feature that provides more interception capabilities and can listen to property addition and deletion.

// Vue3 reactive core source
function createReactiveObject(
  target,
  isReadonly,
  baseHandlers,
  collectionHandlers,
  proxyMap
) {
  if (!isObject(target)) {
    if (__DEV__) {
      warn(`value cannot be made ${isReadonly ? 'readonly' : 'reactive'}: ${String(target)}`);
    }
    return target;
  }
  // target is already a Proxy, return it.
  if (target[ReactiveFlags.RAW] && !(isReadonly && target[ReactiveFlags.IS_REACTIVE])) {
    return target;
  }
  // target already has corresponding Proxy
  const existingProxy = proxyMap.get(target);
  if (existingProxy) {
    return existingProxy;
  }
  // only specific value types can be observed.
  const targetType = getTargetType(target);
  if (targetType === TargetType.INVALID) {
    return target;
  }
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers,
  );
  proxyMap.set(target, proxy);
  return proxy;
}

Fragments (Multiple Root Nodes)

In Vue 3 you can create components that contain multiple root nodes , which was not allowed in previous versions.

<template>
  <header>Header</header>
  <main>Main content</main>
  <footer>Footer</footer>
</template>

Teleport

Teleport is a new component that allows you to move child components to a different location in the DOM, which is useful for handling modals, tooltips and similar UI elements.

<template>
  <teleport to="#modal-container">
    <div v-if="isVisible" class="modal">Modal content</div>
  </teleport>
</template>

<script setup>
import { ref } from 'vue';
const isVisible = ref(false);
</script>

Async Component (Suspense)

Suspense is a built‑in component that coordinates asynchronous dependencies in the component tree, allowing you to display a fallback loading state while waiting for nested async components to resolve.

<Suspense>
<Dashboard />
<template #fallback>
      Loading...
    </template>
  </Suspense>

Virtual DOM Optimization

Vue 3 introduces static node marking ( patchFlags ) that can identify nodes that never change, allowing the renderer to reuse them and skip unnecessary diff calculations.

function createBaseVNode(
  type,
  props = null,
  children = null,
  patchFlag = 0,
  dynamicProps = null,
  shapeFlag = type === Fragment ? 0 : ShapeFlags.ELEMENT,
  isBlockNode = false,
  needFullChildrenNormalization = false,
) {
  const vnode = {
    __v_isVNode: true,
    __v_skip: true,
    type,
    props,
    key: props && normalizeKey(props),
    ref: props && normalizeRef(props),
    scopeId: currentScopeId,
    slotScopeIds: null,
    children,
    component: null,
    suspense: null,
    ssContent: null,
    ssFallback: null,
    dirs: null,
    transition: null,
    el: null,
    anchor: null,
    target: null,
    targetStart: null,
    targetAnchor: null,
    staticCount: 0,
    shapeFlag,
    patchFlag,
    dynamicProps,
    dynamicChildren: null,
    appContext: null,
    ctx: currentRenderingInstance,
  };
  // ...rest of the function omitted for brevity
  return vnode;
}

Diff Algorithm Optimization

Vue 3 improves the diff algorithm to be more targeted; static nodes can be skipped quickly, while dynamic parts are examined precisely.

const patchChildren = (
  n1,
  n2,
  container,
  anchor,
  parentComponent,
  parentSuspense,
  namespace,
  slotScopeIds,
  optimized = false,
) => {
  const c1 = n1 && n1.children;
  const prevShapeFlag = n1 ? n1.shapeFlag : 0;
  const c2 = n2.children;

  const { patchFlag, shapeFlag } = n2;
  // fast path
  if (patchFlag > 0) {
    if (patchFlag & PatchFlags.KEYED_FRAGMENT) {
      patchKeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized);
      return;
    } else if (patchFlag & PatchFlags.UNKEYED_FRAGMENT) {
      patchUnkeyedChildren(c1, c2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized);
      return;
    }
  }
  // ...rest omitted for brevity
};

Tree‑shaking Optimization

Tree‑shaking is a bundler concept (used by webpack , rollup , etc.) that removes unused JavaScript code based on static import / export analysis, keeping the final bundle behavior unchanged.

Vue 2 vs Vue 3 Usage Comparison

Composition API Replaces Options API

Vue 2 relies on the Options API (data, props, computed, watch, lifecycle hooks, etc.), which scatters related logic across different object properties, making the code harder to read and maintain. Vue 3’s Composition API allows related logic to be colocated, improving readability, cohesion and reusability.

Lifecycle

The overall lifecycle hooks remain similar, but most Vue 3 hooks are prefixed with on . In the Composition API you must import the hooks, whereas in Vue 2’s Options API they can be declared directly.

Vue 2

Vue 3

beforeCreate()

setup()

created()

setup()

beforeMount()

onBeforeMount()

mounted()

onMounted()

beforeUpdate()

onBeforeUpdate()

updated()

onUpdated()

beforeDestroy()

onBeforeUnmount()

destroyed()

onUnmounted()

// Vue 2 lifecycle example
export default {
  mounted() {
    // ...
  }
};

import { onMounted } from 'vue';
onMounted(() => {
  // ...
});

Hooks Replace Mixins

In Vue 2, Mixins are a global feature for sharing code across components, which can cause naming conflicts and increase coupling. Vue 3 introduces composable hooks that encapsulate logic in a local module, reducing conflicts and coupling.

export default function () {
  const count = ref(0);
  const add = () => { count.value++; };
  const decrement = () => { count.value--; };
  return { count, add, decrement };
}

State Management: Vuex vs Pinia

Both Vuex and Pinia are state‑management libraries for Vue. Vuex is the official, mature solution with a single store, strict actions/mutations/getters and an extensive ecosystem. Pinia, created by a core Vue contributor, is lighter, more flexible, TypeScript‑friendly, supports multiple stores and optional persistence.

Vite and Webpack

Vite and Webpack are JavaScript bundlers. Vite offers fast cold‑start, efficient HMR, a flexible plugin system and good TypeScript support. Webpack has a larger community, richer plugin ecosystem and supports many module types and resources.

Performance: Vite is faster in development because it leverages native ES modules; Webpack bundles the whole application, which can be slower to start.

Configuration: Vite’s config is simple, while Webpack’s is more complex but more powerful.

Ecosystem: Webpack has a massive ecosystem; Vite is newer with a smaller but growing ecosystem.

For modern front‑end projects, especially those using Vue, Vite is often a compelling choice.