Vue2 快速过度 Vue3 教程 （后端学习）

隔好长一段时间没有写文章了，因为最近公司一个项目进度很赶，导致一直加班，没有时间空出来学习新的东西，这次趁着周末，赶紧补一下之前落下的一直想重新学一下整个大前端生态的想法，这次写一篇自己学习Vue3的笔记

从 Vue 2 到 Vue 3，Vue.js 进行了全面的升级，带来了许多新特性、性能优化和开发体验的提升。以下是 Vue 2 到 Vue 3 的主要变化和核心改进：

一、Composition API

• Vue 2 的 Options API：Vue 2 使用 data、methods、computed 等选项来组织代码，逻辑分散在不同的选项中。

• Vue 3 的 Composition API：引入了 setup 函数，允许开发者将相关逻辑组织在一起，代码更清晰、更易复用。

  • 核心函数：ref、reactive、computed、watch 等。

Vue 3 引入了 Composition API，提供了更好的代码组织方式，特别适用于大型项目。

Vue 2 (Options API)

<template><div>{{ count }}</div><button @click="increment">增加</button>
</template><script>
export default {data() {return {count: 0,user: {name: "张三",age: 25}};},methods: {increment() {this.count++;}}
};
</script>

Vue 3 (Composition API)

Vue 3 使用 setup()，可以直接在script setup 里声明 ref 变量，而不需要 data 和 methods 选项。代码更简洁，逻辑更清晰。Vue 3 提供了 reactive() 和 ref() 作为新的响应式 API。

• reactive() 适用于对象，使整个对象都变成响应式。

• ref() 适用于基本数据类型，如 const count = ref(0)。

<template><div>{{ count }}</div><button @click="increment">增加</button>
</template><script setup>
import { ref,reactive  } from "vue";const count = ref(0);const increment = () => {count.value++;
};const user = reactive({name: "张三",age: 25
});
</script>

二、router

Vue 3 的 vue-router 也进行了升级，主要是 Vue Router 4 替代了 Vue 2 中的 Vue Router 3。以下是它们的主要不同点及代码对比。

创建 Router 实例的方式变化

Vue 2 (Vue Router 3)

在 Vue 2 中，我们通常这样创建路由：

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";Vue.use(VueRouter);const routes = [{ path: "/", component: Home },{ path: "/about", component: About },
];const router = new VueRouter({mode: "history",routes,
});export default router;

然后在 main.js 中：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";new Vue({router,render: (h) => h(App),
}).$mount("#app");

Vue 3 (Vue Router 4)

Vue 3 使用 createRouter() 和 createWebHistory() 来替代 new VueRouter()：

import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";const routes = [{ path: "/", component: Home },{ path: "/about", component: About },
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

然后在 main.js 中：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";const app = createApp(App);
app.use(router);
app.mount("#app");

区别：

• Vue.use(VueRouter) 在 Vue 3 里不再使用，而是 app.use(router)。
• createRouter() 代替了 new VueRouter()。
• createWebHistory() 代替了 mode: “history”。

获取路由对象的方式

Vue 2

this.$route.path; // 获取当前路径
this.$router.push('/about'); // 跳转到 about 页面

Vue 3

Vue 3 仍然支持 this.$route 和 this.$router，但推荐在 Composition API 里使用 useRoute() 和 useRouter()

<script setup>
import { useRoute, useRouter } from "vue-router";const route = useRoute();
const router = useRouter();console.log(route.path); // 获取当前路径const goToAbout = () => {router.push("/about"); // 编程式导航
};
</script>

动态路由的变化

Vue 2

在 Vue 2 中，我们可以用 this.$route.params 获取动态参数：

const userId = this.$route.params.id; 

Vue 3

在 Vue 3 中，推荐使用 useRoute()：

import { useRoute } from "vue-router";const route = useRoute();
const userId = route.params.id;

三、 全局变量和方法

全局变量的定义

Vue 2：使用 Vue.prototype

在 Vue 2 中，我们通常使用 Vue.prototype 来定义全局变量：

import Vue from "vue";Vue.prototype.$globalVar = "我是全局变量";new Vue({el: "#app",created() {console.log(this.$globalVar); // 输出: 我是全局变量}
});

Vue 3：使用 app.config.globalProperties

Vue 3 移除了 Vue.prototype，改用 globalProperties：

import { createApp } from "vue";
import App from "./App.vue";const app = createApp(App);
app.config.globalProperties.$globalVar = "我是全局变量";
app.mount("#app");

使用方式（在组件内访问）：

<script setup>
import { getCurrentInstance } from "vue";const { proxy } = getCurrentInstance();
console.log(proxy.$globalVar); // 输出: 我是全局变量
</script>

全局方法的定义

Vue 2：使用 Vue.prototype

Vue.prototype.$greet = function(name) {return `你好, ${name}`;
};new Vue({created() {console.log(this.$greet("张三")); // 输出: 你好, 张三}
});

Vue 3：使用 globalProperties

app.config.globalProperties.$greet = (name) => `你好, ${name}`;

在组件内使用：

<script setup>
import { getCurrentInstance } from "vue";const { proxy } = getCurrentInstance();
console.log(proxy.$greet("张三")); // 输出: 你好, 张三
</script>

四、生命周期

Vue 3 的生命周期钩子（Lifecycle Hooks）相较于 Vue 2 进行了调整，主要体现在以下几个方面：

1. 选项式 API（Options API）和 Vue 2 基本一致
2. 组合式 API（Composition API）使用 onMounted、onUnmounted 等函数
3. beforeDestroy 变成 onBeforeUnmount，destroyed 变成 onUnmounted

---

生命周期对比表

生命周期	Vue 2	Vue 3（Options API）	Vue 3（Composition API）
创建前	beforeCreate	beforeCreate	-
创建后	created	created	-
挂载前	beforeMount	beforeMount	-
挂载后	mounted	mounted	onMounted()
更新前	beforeUpdate	beforeUpdate	onBeforeUpdate()
更新后	updated	updated	onUpdated()
销毁前	beforeDestroy	beforeUnmount	onBeforeUnmount()
销毁后	destroyed	unmounted	onUnmounted()

Vue 3 的变化：

• beforeDestroy → onBeforeUnmount
• destroyed → onUnmounted
• Vue 3 组合式 API 使用 onMounted、onUnmounted 代替 mounted、destroyed。

---

Options API 写法（Vue 3 仍支持 Vue 2 语法）

Vue 3 仍然支持 传统的生命周期写法：

<script>
export default {data() {return {message: "Hello Vue 3"};},beforeCreate() {console.log("beforeCreate");},created() {console.log("created");},beforeMount() {console.log("beforeMount");},mounted() {console.log("mounted");},beforeUpdate() {console.log("beforeUpdate");},updated() {console.log("updated");},beforeUnmount() {console.log("beforeUnmount");},unmounted() {console.log("unmounted");}
};
</script>

区别：

• beforeDestroy 变成了 beforeUnmount。
• destroyed 变成了 unmounted。

---

Composition API 写法

在 Vue 3 组合式 API 里，生命周期钩子变成了 onXxx() 形式：

<script setup>
import { onMounted, onUnmounted, ref } from "vue";const message = ref("Hello Vue 3");onMounted(() => {console.log("组件已挂载");
});onUnmounted(() => {console.log("组件已卸载");
});
</script>

区别：

• 直接使用 onMounted()，不需要 mounted()。
• 适用于 setup() 语法，更简洁。

---

watchEffect 替代 mounted + watch

Vue 2 中，通常需要在 mounted() 里 watch 监听数据：

<script>
export default {data() {return {count: 0};},mounted() {this.$watch("count", (newValue, oldValue) => {console.log("count 变化：", oldValue, "=>", newValue);});}
};
</script>

Vue 3 推荐用 watchEffect()：

<script setup>
import { ref, watchEffect } from "vue";const count = ref(0);watchEffect(() => {console.log("count 变化:", count.value);
});
</script>

区别：

• watchEffect() 会自动追踪 count.value，不需要手动指定。

---

推荐视频
https://www.bilibili.com/video/BV14g41117HB?spm_id_from=333.788.videopod.episodes&vd_source=036b64d827caa25b16f82980eccb482a&p=2