ChenZhen 搜索
首页 标签 归档 留言板 友链 ChatGPT 提示库 AI工具导航网 🚇开往 关于我

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

隔好长一段时间没有写文章了，因为最近公司一个项目进度很赶，导致一直加班，没有时间空出来学习新的东西，这次趁着周末，赶紧补一下之前落下的一直想重新学一下整个大前端生态的想法，这次写一篇自己学习Vue3的笔记 从 Vue 2 到 Vue 3，Vue.js 进行了全面的升级，带来了许多新特性、性能优化和开发体验的提升。以下是 Vue 2 到 Vue 3 的主要变化和核心改进：

ChenZhen 2025-03-18T09:00:09

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 2Vue 3（Options API）Vue 3（Composition API）
创建前beforeCreatebeforeCreate-
创建后createdcreated-
挂载前beforeMountbeforeMount-
挂载后mountedmountedonMounted()
更新前beforeUpdatebeforeUpdateonBeforeUpdate()
更新后updatedupdatedonUpdated()
销毁前beforeDestroybeforeUnmountonBeforeUnmount()
销毁后destroyedunmountedonUnmounted()

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

© 版权声明

作者：ChenZhen

博客地址：https://www.chenzhen.space/

版权：本文为博主 ChenZhen 的原创文章，本文版权归作者所有，转载请附上原文出处链接及本声明。

如果对你有帮助，请到github👇给项目一个小小的star⭐

github地址：https://github.com/chenzhen7/cz-blog

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

基于springboot + Thymeleaf + vue开发的 个人博客，含前后端

February 16, 2024, 8:46:17 PM
2233
2

在 Java 中调用 ChatGPT API 并实现流式接收（Server-Sent Events, SSE）

April 7, 2025, 10:46:45 AM
59
0

再次重温 Spring 中 Bean 的生命周期

September 30, 2024, 9:16:34 PM
283
0
😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘😗😚😙😋😛😜🤪😝🤑🤗🤭🤫🤔🤐🤨😐😑😶😏😒🙄😬🤥😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵🤯🤠🥳😎🤓🧐😕😟🙁☹️😮😯😲😳🥺😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬