Vue3:全局API(应用实例)

createApp

创建一个应用实例

复制代码
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);

app.mount()

将应用实例挂载在一个容器元素中。

复制代码
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app')

app.unmount()​

卸载一个已挂载的应用实例

app.component()​

如果同时传递一个组件名字符串及其定义,则注册一个全局组件;如果只传递一个名字,则会返回用该名字注册的组件 (如果存在的话)。

复制代码
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
import { Button } from 'view-ui-plus';
app.component('Button', Button);

app.directive()​

如果同时传递一个名字和一个指令定义,则注册一个全局指令;如果只传递一个名字,则会返回用该名字注册的指令 (如果存在的话)。

复制代码
import { createApp } from 'vue'
const app = createApp({
  /* ... */
})
// 注册(对象形式的指令)
app.directive('my-directive', {
  /* 自定义指令钩子 */
})
// 注册(函数形式的指令)
app.directive('my-directive', () => {
  /* ... */
})
// 得到一个已注册的指令
const myDirective = app.directive('my-directive')

app.use()​

安装一个插件。

复制代码
import { createPinia } from 'pinia' 
import { createApp } from 'vue'
import App from './App.vue'
const pinia = createPinia();
const app = createApp(App);
app.use(pinia );

app.mixin()​

应用一个全局 mixin (适用于该应用的范围)。一个全局的 mixin 会作用于应用中的每个组件实例。(不推荐,用组合式函数代替)

app.provide()​

提供一个值,可以在应用中的所有后代组件中注入使用。

复制代码
import { createApp } from 'vue'
const app = createApp(/* ... */)
app.provide('message', 'How are you going?')

import { inject } from 'vue'
export default {
  setup() {
    console.log(inject('message')) // 'How are you going?'
  }
}

app.version​

提供当前应用所使用的 Vue 版本号。这在插件中很有用,因为可能需要根据不同的 Vue 版本执行不同的逻辑。

复制代码
import { createApp } from 'vue'
const app = createApp(/* ... */);
console.log(app.version); // 3.4.13
等同与以下:
import { version} from 'vue';
console.log(version); // 3.4.13

app.config​

每个应用实例都会暴露一个 config 对象,其中包含了对这个应用的配置设定。

复制代码
import { createApp } from 'vue'
const app = createApp(/* ... */);
console.log(app.config); 
// {errorHandler: #, warnHandler:#,performance:#,compilerOptions:#,globalProperties:#,optionMergeStrategies:#} 

app.config.errorHandler​

用于为应用内抛出的未捕获错误指定一个全局处理函数。

app.config.warnHandler​

用于为 Vue 的运行时警告指定一个自定义处理函数。

app.config.performance​

设置此项为 true 可以在浏览器开发工具的"性能/时间线"页中启用对组件初始化、编译、渲染和修补的性能表现追踪。仅在开发模式和支持 performance.mark API 的浏览器中工作。

app.config.compilerOptions​

配置运行时编译器的选项。

app.config.globalProperties​

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

注意:像UI组件中的dialog,confirm,modal都可以在这里注册;

复制代码
import {Message} from 'view-ui-plus';
app.config.globalProperties.$message = Message;

在组件中使用时

复制代码
import { getCurrentInstance } from 'vue';
const { $message } = getCurrentInstance().appContext.config.globalProperties;

app.config.optionMergeStrategies​

一个用于定义自定义组件选项的合并策略的对象。

相关推荐
YUELEI11817 小时前
Vue 安装依赖的集合和小知识
javascript·vue.js·ecmascript
前端付豪18 小时前
万事从 todolist 开始
前端·vue.js·前端框架
华仔啊19 小时前
别再纠结Pinia和Vuex了!一篇文章彻底搞懂区别与选择
前端·vue.js
月弦笙音21 小时前
【Vue3】Keep-Alive 深度解析
前端·vue.js·源码阅读
咖啡の猫1 天前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman1 天前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥1 天前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥1 天前
Vue2 封装二维码弹窗组件
javascript·vue.js
凉柚ˇ1 天前
Vue图片压缩方案
前端·javascript·vue.js
优弧1 天前
Vue 和 React 框架对比分析:优缺点与使用场景
vue.js