参考文档:https://v3.cn.vuejs.org/api/application-api.htmlhttps://v3.cn.vuejs.org/api/application-api.html
component:
API文档:
参数:
{string} name
{Function | Object} [definition]
返回值:
- 如果传入
definition
参数,则返回应用实例。- 如果不传入
definition
参数,则返回组件定义。用法:
注册或检索全局组件。注册还会使用给定的
name
参数自动设置组件的name
。示例:
import { createApp } from 'vue' const app = createApp({}) // 注册一个选项对象 app.component('my-component', { /* ... */ }) // 检索注册的组件 const MyComponent = app.component('my-component')
测试代码:
import { createApp } from 'vue'
var app = createApp({})//创建实例
//注册组件
app.component('component-test',{
data(){
return {
msg:'1111'
}
},
template:'消息:<span >{{msg}}</span>'
});
//挂载到也没上
app.mount('#app')
//获取组件实例
var component_test = app.component('component-test')
console.log(component_test);
运行结果:
config:
API文档:
- 用法:
一个包含应用配置的对象。
- 示例:
import { createApp } from 'vue' const app = createApp({}) app.config = {...}
测试代码:
//配置:
app.config = {
errorHandler:function(err, vm, info){
//异常信息
},
warnHandler:function(msg, vm, trace) {
//告警信息
},
globalProperties:{//全局属性
mm:'111'
}
}
console.log(app.config);
运行结果:
directive:
API文档:
参数:
{string} name
{Function | Object} [definition]
返回值:
- 如果传入
definition
参数,则返回应用实例。- 如果不传入
definition
参数,则返回指令定义。用法:
注册或检索全局指令。
示例:
import { createApp } from 'vue' const app = createApp({}) // 注册 app.directive('my-directive', { // 指令具有一组生命周期钩子: // 在绑定元素的 attribute 或事件监听器被应用之前调用 created() {}, // 在绑定元素的父组件挂载之前调用 beforeMount() {}, // 在绑定元素的父组件挂载之后调用 mounted() {}, // 在包含组件的 VNode 更新之前调用 beforeUpdate() {}, // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用 updated() {}, // 在绑定元素的父组件卸载之前调用 beforeUnmount() {}, // 在绑定元素的父组件卸载之后调用 unmounted() {} }) // 注册 (函数指令) app.directive('my-directive', () => { // 这将被作为 `mounted` 和 `updated` 调用 }) // getter, 如果已注册,则返回指令定义 const myDirective = app.directive('my-directive')
测试代码:
// 注册
app.directive('my-directive', {
// 指令具有一组生命周期钩子:
// 在绑定元素的 attribute 或事件监听器被应用之前调用
created() {},
// 在绑定元素的父组件挂载之前调用
beforeMount() {},
// 在绑定元素的父组件挂载之后调用
mounted() {},
// 在包含组件的 VNode 更新之前调用
beforeUpdate() {},
// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
updated() {},
// 在绑定元素的父组件卸载之前调用
beforeUnmount() {},
// 在绑定元素的父组件卸载之后调用
unmounted() {}
})
// 注册 (函数指令)
app.directive('my-directive', () => {
// 这将被作为 `mounted` 和 `updated` 调用
})
// getter, 如果已注册,则返回指令定义
const myDirective = app.directive('my-directive')
console.log(myDirective);
运行结果:
mixin:
API文档:
参数:
{Object} mixin
返回值:
- 应用实例
用法:
将一个 mixin 应用在整个应用范围内。一旦注册,它们就可以在当前的应用中任何组件模板内使用它。插件作者可以使用此方法将自定义行为注入组件。不建议在应用代码中使用。
测试代码:
// 为自定义的选项 'myOption' 注入一个处理器。
app.mixin({
created() {
const myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
mount:
API文档:
参数:
{Element | string} rootContainer
{boolean} isHydrate
返回值:
- 根组件实例
用法:
所提供 DOM 元素的
innerHTML
将被替换为应用根组件的模板渲染结果。示例:
<body> <div id="my-app"></div> </body>
import { createApp } from 'vue' const app = createApp({}) // 做一些必要的准备 app.mount('#my-app')
provide:
API文档:
参数:
{string | Symbol} key
value
返回值:
- 应用实例
用法:
设置一个可以被注入到应用范围内所有组件中的值。组件应该使用
inject
来接收 provide 的值。从
provide
/inject
的角度来看,可以将应用程序视为根级别的祖先,而根组件是其唯一的子级。该方法不应该与 provide 组件选项或组合式 API 中的 provide 方法混淆。虽然它们也是相同的
provide
/inject
机制的一部分,但是它们是用来配置组件而非应用所 provide 的值。通过应用提供值在编写插件时尤其有用,因为插件一般不能使用组件来提供值。这是对 globalProperties 的替代选择。
注意
provide
和inject
绑定不是响应式的。这是有意为之的。不过,如果你向下传递一个响应式对象,这个对象上的 property 会保持响应式。示例:
向根组件中注入一个 property,值由应用提供:
import { createApp } from 'vue' const app = createApp({ inject: ['user'], template: ` <div> {{ user }} </div> ` }) app.provide('user', 'administrator')
unmount:
API文档:
用法:
卸载应用实例的根组件。
示例:
<body> <div id="my-app"></div> </body>
import { createApp } from 'vue' const app = createApp({}) // 做一些必要的准备 app.mount('#my-app') // 挂载 5 秒后,应用将被卸载 setTimeout(() => app.unmount(), 5000)
use:
API文档:
参数:
{Object | Function} plugin
...options (可选)
返回值:
- 应用实例
用法:
安装 Vue.js 插件。如果插件是一个对象,则它必须暴露一个
install
方法。如果插件本身是一个函数,则它将被视为install
方法。该
install
方法将以应用实例作为第一个参数被调用。传给use
的其他options
参数将作为后续参数传入该安装方法。当在同一个插件上多次调用此方法时,该插件将仅安装一次。
示例:
import { createApp } from 'vue' import MyPlugin from './plugins/MyPlugin' const app = createApp({}) app.use(MyPlugin) app.mount('#app')
version:
API文档:
用法:
以字符串形式提供已安装的 Vue 的版本号。这对于基于不同版本使用不同策略的社区插件来说特别有用。
示例:
export default { install(app) { const version = Number(app.version.split('.')[0]) if (version < 3) { console.warn('This plugin requires Vue 3') } // ... } }
测试代码:
const version = Number(app.version.split('.')[0])
console.log(version);
运行结果: