vue3中global函数

vue3中global函数

在 Vue 3 中，全局 API 的设计发生了显著变化，许多在 Vue 2 中通过 Vue.prototype 或 Vue 直接挂载的全局方法（如 Vue.use、Vue.component 等）被重新组织为独立的函数，并通过 app 实例来调用。以下是 Vue 3 中全局函数的详细解析和使用方法。

1. Vue 3 全局 API 的变化

在 Vue 3 中，全局 API 被设计为模块化的函数，主要通过 app 实例来调用。以下是 Vue 2 和 Vue 3 的全局 API 对比：

Vue 2 全局 API	Vue 3 全局 API	说明
Vue.component	app.component	注册全局组件。
Vue.directive	app.directive	注册全局指令。
Vue.mixin	app.mixin	注册全局混入。
Vue.use	app.use	安装插件。
Vue.prototype	app.config.globalProperties	挂载全局属性或方法。
Vue.filter	已移除	Vue 3 中移除了全局过滤器，推荐使用计算属性或方法替代。
new Vue()	createApp()	创建应用实例。

2. Vue 3 全局函数详解

(1) createApp

• 作用: 创建一个 Vue 应用实例。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

(2) app.component

• 作用: 注册或获取全局组件。

// 注册全局组件
app.component('MyComponent', {
  template: '<div>My Component</div>',
});

// 获取已注册的组件
const MyComponent = app.component('MyComponent');

(3) app.directive

• 作用: 注册或获取全局指令。

// 注册全局指令
app.directive('focus', {
  mounted(el) {
    el.focus();
  },
});

// 获取已注册的指令
const focusDirective = app.directive('focus');

(4) app.mixin

• 作用: 注册全局混入。

app.mixin({
  created() {
    console.log('Global mixin - created hook');
  },
});

(5) app.use

• 作用: 安装插件。

import MyPlugin from './plugins/MyPlugin';

app.use(MyPlugin);

(6) app.config.globalProperties

• 作用: 挂载全局属性或方法。

app.config.globalProperties.$myGlobalMethod = function () {
  console.log('This is a global method');
};

在组件中使用：

export default {
  mounted() {
    this.$myGlobalMethod(); // 调用全局方法
  },
};

(7) app.mount

• 作用: 将应用挂载到 DOM 元素。

app.mount('#app');

(8) app.unmount

• 作用: 卸载应用实例。

app.unmount();

3. 全局函数的实际应用

(1) 注册全局组件

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注册全局组件
app.component('MyButton', {
  template: '<button>Click Me</button>',
});

app.mount('#app');

(2) 注册全局指令

app.directive('highlight', {
  beforeMount(el, binding) {
    el.style.backgroundColor = binding.value || 'yellow';
  },
});

(3) 使用全局插件

import MyPlugin from './plugins/MyPlugin';

app.use(MyPlugin, { someOption: true });

(4) 挂载全局方法

app.config.globalProperties.$formatDate = function (date) {
  return new Date(date).toLocaleDateString();
};

在组件中使用：

export default {
  mounted() {
    console.log(this.$formatDate('2023-10-01'));
  },
};

4. 注意事项

避免滥用全局属性：全局属性过多可能导致命名冲突或难以维护。

插件开发：在开发插件时，优先使用 app.provide 和 inject 来实现依赖注入。

Tree Shaking：Vue 3 的模块化设计支持 Tree Shaking，未使用的全局 API 不会被打包到最终产物中。

总结

Vue 3 的全局 API 更加模块化和灵活，通过 app 实例可以轻松注册全局组件、指令、混入和插件。合理使用全局函数可以提升开发效率，但需要注意避免滥用，保持代码的可维护性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github