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

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

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

这里写目录标题

一、Composition API
- Vue 2 (Options API)
- Vue 3 (Composition API)
二、router
- 创建 Router 实例的方式变化
- - Vue 2 (Vue Router 3)
  - Vue 3 (Vue Router 4)
- 获取路由对象的方式
- - Vue 2
  - Vue 3
- 动态路由的变化
- - Vue 2
  - Vue 3
三、全局变量和方法
- 全局变量的定义
- - Vue 2：使用 Vue.prototype
  - Vue 3：使用 app.config.globalProperties
- 全局方法的定义
- - Vue 2：使用 Vue.prototype
  - Vue 3：使用 globalProperties
四、生命周期
- 生命周期对比表
- Options API 写法（Vue 3 仍支持 Vue 2 语法）
- **Composition API 写法**
- `watchEffect` 替代 `mounted + watch`

一、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 进行了调整，主要体现在以下几个方面：

选项式 API（Options API）和 Vue 2 基本一致
组合式 API（Composition API）使用 onMounted、onUnmounted 等函数
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>