1. 核心语法结构对比Vue 2 (Options API)Vue 3 (script setup)说明模板模板模板语法基本不变 (v-if, v-for, v-model)htmlbrtemplatediv{{ count }}/div/templatebrscriptbrexport default {br data() { return { count: 0 } },br methods: { inc() { this.count } }br}br/scripthtmlbrtemplatediv{{ count }}/div/templatebrscript setupbrimport { ref } from vuebrconst count ref(0)brconst inc () count.valuebr/scriptscript setup是语法糖无需export default顶层变量自动暴露给模板。this 指向无 thisVue 2 依赖thisVue 3 直接访问变量更清晰。2. 响应式数据 (Reactivity)不再区分data,props,computed的写法统一用函数。概念Vue 2Vue 3 (Composition API)注意事项基础类型(string, number)data() { return { count: 0 } }使用this.countconst count ref(0)使用 (JS):count.value使用 (模板):{{ count }}重点: JS 中访问ref必须加.value模板中自动解包。对象/数组data() { return { user: {} } }方式 A:const user ref({})(需.value)方式 B:const user reactive({})(无需.value)推荐: 优先用ref保持一致性若对象层级深且频繁修改可用reactive。计算属性computed: { double() { return this.count * 2 } }const double computed(() count.value * 2)只读。若要写值computed({ get: ()..., set: (v)... })监听器watch: { count(val) { ... } }watch(count, (newVal, oldVal) { ... })监听多个watch([a, b], ...)watch第一个参数可以是ref或 getter 函数() obj.prop。深度监听watch: { user: { handler, deep: true } }watch(user, ..., { deep: true })若用reactive默认开启深度。3. 生命周期 (Lifecycle Hooks)钩子函数名称改变需要导入并在setup中调用。阶段Vue 2Vue 3 (导入自 vue)说明创建前beforeCreate❌ 不需要setup()本身就是初始化逻辑创建后created❌ 不需要在setup()中直接写代码即可挂载前beforeMountonBeforeMount挂载后mountedonMounted常用操作 DOM, 发起请求更新前beforeUpdateonBeforeUpdate更新后updatedonUpdated卸载前beforeDestroyonBeforeUnmount⚠️ 名字变了 (Destroy - Unmount)卸载后destroyedonUnmounted⚠️ 名字变了错误捕获errorCapturedonErrorCaptured示例// Vue 2 mounted() { console.log(mounted) } // Vue 3 import { onMounted } from vue onMounted(() { console.log(mounted) })4. 组件通信 (Props Emits)功能Vue 2Vue 3 (script setup)说明接收 Propsprops: [title]使用this.titleconst props defineProps([title])使用props.titledefineProps无需导入编译器宏。定义 Emitsemits: [update]触发this.$emit(update)const emit defineEmits([update])触发emit(update)defineEmits无需导入。双向绑定v-modelval(默认)v-modelval(默认 prop:modelValue, event:update:modelValue)Vue 3 移除了.sync统一用v-model:propName。多 v-model不支持 (需用 .sync 变通)Comp v-model:titlet v-model:countc /父组件可绑定多个模型。5. 插槽 (Slots) 与 refs功能Vue 2Vue 3 (script setup)说明默认插槽slot/slotslot/slot模板用法不变具名插槽slot nameheader/slotslot nameheader/slot作用域插槽template v-slot:defaultslotPropstemplate #default{ item }#是v-slot:的简写 (Vue 2.6 已有Vue 3 推荐)获取子组件实例this.$refs.childconst child ref(null)Child refchild /重大变化:ref现在是响应式变量需绑定到 template 的ref属性。访问时用child.value。获取 DOM 元素this.$refs.inputconst input ref(null)input refinput /同上统一用ref()。6. 全局 API 与 内置组件变化Vue 2Vue 3说明Vue.use(Plugin)app.use(Plugin)必须通过createApp实例调用Vue.component(...)app.component(...)Vue.directive(...)app.directive(...)new Vue({ ... })createApp({ ... })入口变了transitiontransition类名变化v-enter-v-enter-from,v-leave-v-leave-fromtransition-grouptransition-group同上v-on:clickclick简写依旧支持keyCode修饰符❌ 已移除必须使用key别名 (如.enter) 或检查event.key$children❌ 已移除使用ref或provide/inject替代$listeners❌ 已移除所有监听器都合并到$attrs中自动透传7. 状态管理 (Vuex - Pinia)Vue 3 官方推荐Pinia替代 Vuex。概念Vuex (Vue 2)Pinia (Vue 3)优势定义 Storenew Vuex.Store({ state, mutations, actions })defineStore(id, { state, actions, getters })去掉了mutations只有 state/getters/actions。读取 Statethis.$store.state.countstore.count像访问普通对象属性一样。修改 Statethis.$store.commit(inc)store.count或store.inc()直接修改或调用 action更直观。映射辅助函数mapState,mapActions不需要直接解构 (需注意storeToRefs)代码更少。TypeScript支持较差需复杂泛型原生完美支持 TS自动推断类型。Pinia 示例:// stores/counter.ts import { defineStore } from pinia export const useCounterStore defineStore(counter, { state: () ({ count: 0 }), actions: { increment() { this.count } // 直接用 this } }) // 组件中使用 import { useCounterStore } from /stores/counter const store useCounterStore() store.increment() console.log(store.count)8. 常见迁移陷阱 (Pitfalls)Ref 的.value:在script里忘记加.value是最常见的错误。口诀: 模板里直接用脚本里加点值。Reactive 的解构丢失响应性:const { name } reactive(user)-name失去响应性。解决: 使用toRefs(user)或直接用user.name。Watch 的第一个参数:如果监听reactive对象的某个属性必须用 getter:watch(() obj.prop, ...)。如果直接传obj.prop(值)它不会响应变化。Provide / Inject:Vue 2:provide: { key: value }Vue 3:provide(key, value)和inject(key, defaultValue)函数。异步组件:Vue 2:() import(./Comp.vue)Vue 3:defineAsyncComponent(() import(./Comp.vue))9. 快速迁移步骤升级依赖:npm install vuelatest全局搜索替换:beforeDestroy-onBeforeUnmountdestroyed-onUnmounted$children- 重构为ref列表转换单文件组件 (SFC):将script改为script setup langts(推荐直接上 TS)。把data转为ref/reactive。把methods转为普通函数。把computed转为computed()。把watch转为watch()。把props/emits转为defineProps/defineEmits。状态管理: 逐步将 Vuex 模块迁移到 Pinia。总结: Vue 3 的核心思想是“逻辑复用”。以前靠 Mixins (有命名冲突风险)现在靠Composables (组合式函数)(如useMouse,useFetch)。这是 Vue 3 最强大的特性建议在学习基础语法后立即学习如何编写 Composables。https://cn.vuejs.org/