Vue3 总结梳理

持续更新中 …

vue3.x 如何注册全局组件/方法（替代vue2.x的Vue.prototype）

• 参见

比如将 axios 等第三方组件， 进行全局注册，方便全局中使用。

Vue 2 中，一般可以定义在 Vue 原型上：

// main.js
import Vue from 'vue';
import App from './App';
import axios from 'axios';

Vue.prototype.$axios = axios
//...

然后就可以在任何 Vue 实例中使用类似 this.$axios.get 的方法。

Vue3 中，

（一）利用 config.globalProperties（不推荐）：

// main.js
const app = createApp({})
app.config.globalProperties.$axios = axios

Vue3 中没有 this ，getCurrentInstance 支持访问内部组件实例。在组件中，通过getCurrentInstance().appContext.config.xxx 获取并调用：

import { onMounted, getCurrentInstance } from 'vue';

onMounted(() => {
     getCurrentInstance().appContext.config.$axios
});

getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。

可见：官方反对我们这样使用 getCurrentInstance，可以采取以下方式：

（二）利用 provide / inject （✨推荐）：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);
app.provide('$axios', axios)

app.mount('#app');

组件中，通过 inject 获取并调用：

import { onMounted, inject } from 'vue';

onMounted(() => {
     const http = inject('$axios')
     http.get()
     // ...
});

vue3.x 如何按需引入三方组件库，如 vant

• 参考
• 参见
• 参见