vue2代码转vue3代码日常开发常用的有哪些

系统版本升级将 Vue 2 代码升级到 Vue 3，日常开发中，最常遇到的改动主要集中在以下几个方面。

高频迁移清单

关键点详解与代码示例

1. 根实例与全局配置（变化最大）

这是Vue3项目入口文件最直观的改变。

// --- Vue 2 ---
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
Vue.prototype.$http = axios // 挂载全局方法

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

// --- Vue 3 ---
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.config.productionTip = false
app.config.globalProperties.$http = axios // 挂载全局方法

app.use(router).mount('#app')

2. 组件内部：拥抱 <script setup>

这是日常开发中使用频率最高的改变，代码量会显著减少。

<!-- ===== Vue 2 ===== -->
<script>
export default {
  props: { msg: String },
  emits: ['update'],
  data() {
    return { count: 0 }
  },
  computed: {
    doubleCount() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}
</script>

<!-- ===== Vue 3 (推荐写法) ===== -->
<script setup>
import { ref, computed } from 'vue'

// 定义 Props 和 Emits (编译器宏)
const props = defineProps(['msg'])
const emit = defineEmits(['update'])

// 响应式数据、计算属性、方法直接写
const count = ref(0)
const doubleCount = computed(() => count.value * 2)

const increment = () => {
  count.value++
  emit('update', count.value) // 直接使用 emit 函数
}
</script>

3. 生命周期与 this 指向

• this 不再是万能钥匙：在 <script setup> 中，你无法使用 this。所有变量、函数都直接定义和使用，这让代码更清晰。
• 生命周期钩子重命名：销毁阶段的两个钩子被重命名，以更好地对应 before/after 概念。
• setup 代替 beforeCreate 和 created：Vue3 中 setup 的执行时机更早，你在这个阶段需要做的事情，直接写在 <script setup> 的顶层即可。

// Vue 2 的 mounted
mounted() { this.fetchData() }

// Vue 3 的 mounted
import { onMounted } from 'vue'
onMounted(() => { fetchData() })

4. 移除的特性：过滤器和事件总线

• 过滤器 (Filters)：官方认为它容易造成混淆且与计算属性功能重叠，已在 Vue 3 中完全移除。
  • 替代方案：如果逻辑简单，用方法调用替代；如果与数据有关，用计算属性；如果全局通用，可以定义一个全局方法。
• $on， $off 和 $once (事件总线)：这些实例方法已被移除。
  • 替代方案：组件间通信使用 v-model 或 provide/inject；跨组件、全局事件通信，使用第三方库 mitt 或状态管理工具 Pinia。