Vue.js: What is the difference between Vue 2 and Vue 3?

Vue 3 — modern Composition API with better performance. Vue 2 — traditional Options API.

Vue 2:

• Options API with data, methods, computed properties.
• Larger bundle size (~22KB gzipped).
• Slower performance due to Object.defineProperty.
• No built-in TypeScript support.
• Limited Composition API (available as plugin).

Vue 3:

• Composition API for flexible code organization.
• Smaller bundle (~16KB gzipped) with tree-shaking.
• Faster with Proxy-based reactivity.
• Better TypeScript support out of the box.
• New features: Teleport, Suspense, Fragments.

1// Vue 2 - Options API
2export default {
3  data() {
4    return { count: 0 }
5  },
6  methods: {
7    increment() {
8      this.count++
9    }
10  }
11}

1// Vue 3 - Composition API
2import { ref } from "vue"
3
4export default {
5  setup() {
6    const count = ref(0)
7    const increment = () => count.value++
8    return { count, increment }
9  }
10}

Key differences:

• Vue 2 — Options API, larger bundle, slower.
• Vue 3 — Composition API, smaller bundle, faster.
• Vue 3 — better TypeScript support.
• Vue 3 — new features like Teleport and Suspense.