【涅槃】Vue3学习笔记（完结）Vue3中的全局API 创建应用实例 createApp 创建一个 Vue 应用实例，这

Vue3中的全局API

在 Vue 3 中，全局 API 是用于在应用层面进行配置、注册和管理的工具。与 Vue 2 相比，Vue 3 的全局 API 有了较大的调整，主要围绕createApp方法展开，并通过应用实例（app）来访问各种功能。

创建应用实例

createApp
创建一个 Vue 应用实例，这是 Vue 3 的入口点

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

const app = createApp(App);
app.mount('#app');

createSSRApp

创建用于服务端渲染（SSR）的 Vue 应用实例。

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

const app = createSSRApp(App);

应用实例方法

app.component

全局注册组件。

import MyComponent from './MyComponent.vue';
app.component('MyComponent', MyComponent);

app.directive

全局注册自定义指令。

app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

app.use

安装插件。

import MyPlugin from './MyPlugin';
app.use(MyPlugin);

app.mixin

注册全局混入。

app.mixin({
  created() {
    console.log('Global mixin created!');
  }
});

app.provide

向整个应用提供依赖，用于依赖注入。

app.provide('theme', 'dark');

app.config

访问和修改全局配置。

app.config.globalProperties.$myProperty = 'value';
app.config.errorHandler = (err, vm, info) => {
  console.error('Caught an error:', err);
};

app.version

获取当前 Vue 的版本号。

console.log(app.version);

通用全局 API

defineComponent

定义一个组件，支持类型推断。

import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  }
});

defineAsyncComponent

定义一个异步组件。

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./MyComponent.vue')
);

nextTick

在下一次 DOM 更新完成后执行回调。

import { nextTick } from 'vue';

nextTick(() => {
  console.log('DOM updated');
});

创建一个虚拟节点（用于手动操作 VNode）。

import { h } from 'vue';

const vnode = h('div', { class: 'container' }, 'Hello, Vue 3!');

version

获取 Vue 的版本号。

import { version } from 'vue';

console.log(version);

其他全局 API

resolveComponent

按名称解析组件。

import { resolveComponent } from 'vue';

const Component = resolveComponent('MyComponent');

resolveDirective

按名称解析指令。

import { resolveDirective } from 'vue';

const Directive = resolveDirective('focus');

mergeProps

合并多个对象为一个 VNode 的 props。

import { mergeProps } from 'vue';

const props = mergeProps({ class: 'container' }, { id: 'main' });

useCssModule

访问 CSS 模块。

import { useCssModule } from 'vue';

const styles = useCssModule('styles');

全局配置选项

app.config.globalProperties

向所有组件实例添加全局属性。

app.config.globalProperties.$myProperty = 'value';

app.config.errorHandler

全局错误处理函数。

app.config.errorHandler = (err, vm, info) => {
  console.error('Caught an error:', err);
};

app.config.warnHandler

全局警告处理函数。

app.config.warnHandler = (msg, vm, trace) => {
  console.warn('Warning:', msg);
};

app.config.performance

是否启用性能追踪。

app.config.performance = true;

app.config.compilerOptions

配置编译器选项。

app.config.compilerOptions.whitespace = 'preserve';

app.config.optionMergeStrategies

自定义选项合并策略。

app.config.optionMergeStrategies.myOption = (toVal, fromVal) => {
  return toVal || fromVal;
};

总结

Vue 3 的全局 API 主要围绕createApp和应用实例展开，提供了灵活的配置和注册功能。

主要的全局 API：

创建应用实例：
- createApp
- createSSRApp
应用实例方法：
- app.component
- app.directive
- app.use
- app.mixin
- app.provide
- app.config
通用全局 API：
- defineComponent
- defineAsyncComponent
- nextTick
- h
- version
其他全局 API：
- resolveComponent
- resolveDirective
- mergeProps
- useCssModule
全局配置选项：
- app.config.globalProperties
- app.config.errorHandler
- app.config.warnHandler
- app.config.performance
- app.config.compilerOptions
- app.config.optionMergeStrategies

这些全局 API 提供了强大的功能，帮助开发者更好地管理 Vue 应用的全局状态和行为。

后续计划

至此Vue3的笔记部分已经基本完结，基础知识点储备也达到一定的体量，后续计划结合一些项目的实战来巩固已经储备的这些知识点。