Vue 3 vs Vue 2 differences
Vue 3 brought the Composition API, faster rendering and several breaking changes from Vue 2.
In this page:
Vue 3 vs Vue 2 differences
Vue 3 uses createApp instead of new Vue, supports multiple root nodes, replaces the event bus methods, renames destroy hooks to unmount, uses v-model with modelValue, and introduces Teleport, Suspense and the Composition API.
It is rewritten in TypeScript with a Proxy-based reactivity system.
Note:
Vue 2 reached end of life in December 2023.
Example: Vue 3 vs Vue 2 differences
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>Vue 3 API: createApp is a {{ createAppType }}, major version {{ major }}</p>
<fragment-demo></fragment-demo>
</div>
<script>
const app = Vue.createApp({ data() { return { createAppType: typeof Vue.createApp, major: Vue.version.split(".")[0] }; } });
// Vue 3 components may have several root nodes (fragments)
app.component("fragment-demo", { template: "<h4>Root one</h4><h4>Root two</h4>" });
app.mount("#app");
</script>
</body>
</html>
<!-- Output:
Rendered: Vue 3 API: createApp is a function, major version 3Root oneRoot two
-->Related Topics
Common Mistakes
- Using new Vue in Vue 3
- Using $on and $off
- Using the Vue 2 filters feature
Chapter Summary
- createApp replaces new Vue
- Multiple root elements are allowed
- Hooks renamed to unmount
- Composition API, Teleport, Suspense
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: