子卿全栈系列💯

Appearance

🔠
📤
🕵️
📈0️⃣

应用实例 API ​

全局 API

Vue 3 在创建和配置应用程序时常用的一些方法和属性，全局 API 是一些全局性的方法或属性，可以在 Vue 应用程序中直接使用，而不需要通过组件实例来访问。

包括应用实例 API 和 通用 API。

应用实例 API 简介 ​

  1. createApp(): 创建应用实例的工厂函数，可以用来初始化一个新的应用程序实例。

  2. createSSRApp(): 与 createApp 类似，但用于创建服务器端渲染应用程序实例。

  3. app.mount(): 用于手动挂载应用程序到指定的 DOM 元素上。

  4. app.unmount(): 用于手动卸载应用程序，清除组件实例并解绑其数据。

  5. app.component(): 用来注册全局组件或应用范围内组件。

  6. app.directive(): 用来注册全局自定义指令。

  7. app.use(): use 方法用来安装 Vue.js 插件。

  8. app.mixin(): 用来混入全局 mixin 对象到所有组件中。

  9. app.provide(): 用来向后代组件注入依赖项。

  10. app.runWithContext(): 用来在指定上下文下运行指定操作。

  11. app.version: 用来获取 Vue.js 的版本信息。

  12. app.config: 存储应用程序的配置选项。

  13. app.config.errorHandler: 用来全局处理应用程序的错误。

  14. app.config.warnHandler: 用来全局处理应用程序发出的警告。

  15. app.config.performance: 用来开启或关闭性能追踪工具。

  16. app.config.compilerOptions: 用来配置模板编译选项。

  17. app.config.globalProperties: 用来定义全局属性和方法。

  18. app.config.optionMergeStrategies: 用来定义特定配置选项的合并策略。

应用实例 API 示例 ​

下面为您逐个提供每个 API 的代码示例：

  1. createApp(): 创建应用程序实例。
javascript
import { createApp } from 'vue';

const app = createApp({...}); // 创建应用程序实例
  1. createSSRApp(): 创建服务器端渲染应用程序实例。
javascript
import { createSSRApp } from 'vue';

const app = createSSRApp({...}); // 创建服务器端渲染应用程序实例
  1. app.mount(): 将应用程序手动挂载到 DOM 元素上。
javascript
app.mount("#app"); // 挂载应用程序到具有 id "app" 的 DOM 元素上
  1. app.unmount(): 手动卸载应用程序。
javascript
app.unmount(); // 卸载应用程序
  1. app.component(): 注册全局组件或应用范围内组件。
javascript
app.component('my-component', {...}); // 注册名为 "my-component" 的全局组件
  1. app.directive(): 注册全局自定义指令。
javascript
app.directive('my-directive', {...}); // 注册名为 "my-directive" 的全局指令
  1. app.use(): 安装 Vue.js 插件。
javascript
import MyPlugin from "./MyPlugin";

app.use(MyPlugin); // 安装自定义插件
  1. app.mixin(): 混入全局 mixin 对象到所有组件中。
javascript
const myMixin = {...};

app.mixin(myMixin); // 将 myMixin 混入到所有组件中
  1. app.provide(): 向后代组件注入依赖项。
javascript
app.provide('myData', {...}); // 向后代组件注入名为 "myData" 的依赖项
  1. app.runWithContext(): 在指定上下文下运行指定操作。
javascript
app.runWithContext(context, () => {
  // 在指定上下文 context 下运行操作
});
  1. app.version: 获取 Vue.js 的版本信息。
javascript
console.log(app.version); // 输出 Vue.js 的版本信息
  1. app.config: 应用程序的配置选项。
javascript
console.log(app.config); // 输出应用程序的配置选项
  1. app.config.errorHandler: 全局处理应用程序的错误。
javascript
app.config.errorHandler = (err, vm, info) => {
  console.error("Error:", err);
  console.error("Component:", vm);
  console.error("Additional Info:", info);
};
  1. app.config.warnHandler: 全局处理应用程序发出的警告。
javascript
app.config.warnHandler = (msg, vm, trace) => {
  console.warn("Warning:", msg);
  console.warn("Component:", vm);
  console.warn("Trace:", trace);
};
  1. app.config.performance: 开启或关闭性能追踪工具。
javascript
app.config.performance = process.env.NODE_ENV === "development";
  1. app.config.compilerOptions: 配置模板编译选项。
javascript
app.config.compilerOptions = {
  // 配置模板编译选项
};
  1. app.config.globalProperties: 定义全局属性和方法。
javascript
app.config.globalProperties.$myGlobalProperty = 'Example'; // 定义全局属性
app.config.globalProperties.$myGlobalMethod = () => { ... }; // 定义全局方法
  1. app.config.optionMergeStrategies: 定义特定配置选项的合并策略。
javascript
app.config.optionMergeStrategies.customOption = (parentVal, childVal) => {
  // 自定义合并策略
};

以上是每个 API 的简单代码示例。