What are the key differences between Vue 2 and Vue 3? (Migration Guide)

Vue 3是重大重写，核心变化包括Proxy响应式系统（ref/reactive替代data）、Composition API（setup替代选项式API）、多根节点模板、Teleport/Suspense等新特性，以及移除filters、重构v-model和全局API。

Vue 3 is a major rewrite—not just an upgrade—so core concepts, syntax, and internal behavior changed meaningfully. The shift focuses on better performance, stronger TypeScript support, improved reactivity, and more flexible composition patterns. Below are the key differences you’ll encounter when migrating or learning Vue 3.

Reactivity System: ref() vs. data()

Vue 2 used a hidden, object-based reactivity system that wrapped data properties in getters/setters. Vue 3 replaces this with Proxy-based reactivity, which is more consistent and supports arrays, Maps, Sets, and nested objects out of the box.

• In Vue 2, reactivity was declared inside a data() function returning an object; changes to new properties required this.$set().
• In Vue 3, reactive state is created explicitly using ref() (for primitives) and reactive() (for objects). You must use .value to access or assign values from a ref.
• setup() replaces data, computed, methods, and lifecycle hooks — all defined inside it before the component renders.

Composition API: setup() and logical reuse

The Composition API is optional in Vue 2 (via plugin), but built-in and idiomatic in Vue 3. It lets you group related logic by concern instead of by option type.

• setup() runs before created() and receives props and context (containing emit, slots, attrs).
• Logic can be extracted into reusable functions (composables) — e.g., useMouse(), useFetch() — without mixins or renderless components.
• Lifecycle hooks like onMounted, onUpdated, and onUnmounted are now imported and used inside setup().

Template & Rendering: Fragments, teleport, and dynamic components

Vue 3 removes several template limitations and introduces new built-in features:

• Fragments: Templates can have multiple root nodes — no need for a wrapping <div>.
• <Teleport>: Built-in component for rendering content elsewhere in the DOM (e.g., modals, tooltips).
• <Suspense>: Built-in async boundary for waiting on async setup() or async components.
• <KeepAlive> and <Transition> are now components (not directives), and their usage is more consistent.

Breaking Changes & Compatibility Notes

Some Vue 2 patterns no longer work without adjustment:

• filters were removed — use computed properties or plain functions instead.
• v-model now compiles to modelValue prop + update:modelValue event by default (customizable via model option in defineComponent).
• vm.$children, vm.$listeners, and vm.$scopedSlots are gone — use slots, emit, and explicit props.
• Global API is tree-shakable: Vue.use(), Vue.mixin(), Vue.component() are replaced by app instance methods like app.use(), app.mixin(), app.component().

The above is the detailed content of What are the key differences between Vue 2 and Vue 3? (Migration Guide). For more information, please follow other related articles on the PHP Chinese website!