Vue基础教程（188）axios之Vue.js 3.0的新变化—替代Vue.prototype：别了，Vue.prototype！Vue.js 3.0 携手 Axios 开启“新时代”，是时候跟老伙

原创

于 2025-10-06 11:03:25 发布 · 847 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #原型模式 #前端

第一章：忆往昔峥嵘岁月稠——Vue 2 的 “this.$http” 黄金时代

还记得在 Vue 2 的美好旧时光吗？那时候，我们想用一个库，比如今天的主角——那个号称“基于 Promise 的、贼好用的 HTTP 客户端” Axios，是怎么做的？

简单得令人发指！在 main.js 里，我们通常是这么“骚操作”的：

// Vue 2 经典操作 main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

// 骚操作来了！挂在 Vue 的原型上
Vue.prototype.$http = axios

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

就这么一行 Vue.prototype.$http = axios，我们就完成了一次伟大的“全局注册”。从此以后，在整个 Vue 帝国的任何角落，无论是京城（根组件）还是偏远山村（深层子组件），你都可以通过 this.$http 呼风唤雨，发起任何 HTTP 请求。

<!-- 在任何 Vue 2 组件中 -->
<script>
export default {
  methods: {
    async fetchUserData() {
      // 看，多么自然，多么顺手！
      const response = await this.$http.get('/api/user/123');
      this.user = response.data;
    }
  }
}
</script>

这感觉，就像你给你家所有的门都配了同一把万能钥匙，去哪儿都畅通无阻。this 就是那把钥匙，$http 就是门上那个唯一的锁眼。

但是！（凡事就怕个但是）

Vue 3 驾着七彩祥云来了，它对着 this 说：“你，已经不是从前那个少年了。”