系列文章为自我学习文章，所有的学习代码来自于官方和博主练习代码

纵览

在vue3中全局api变成了createApp,如下面实例

import {createApp} from 'Vue'
import App from 'App.vue'
import store from './stroe'
import router from './router'

createApp(App).use(stroe).use(router).mount('#app')

注意createApp返回的是应用实例所以支持链式调用

方法

component

注册或者检索全局组件

import { createApp } from 'vue'

const app = createApp({})

// 注册一个名为my-component的组件,组件的name会自动设置为my-component
app.component('my-component', {
  /* ... */
})

// 检索注册的组件(始终返回构造函数)
const MyComponent = app.component('my-component', {})

config

应用配置对象

import { createApp } from 'vue'
const app = createApp({})

app.config = {...}

directive

注册或检索全局指令

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')

mixin

反正我不从来注册全局

const app = Vue.createApp({
  myOption: 'hello!'
})

// 为自定义的选项 'myOption' 注入一个处理器。
app.mixin({
  created() {
    const myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

app.mount('#mixins-global') // => "hello!"

mount

把应用的渲染结果挂载到dom元素上面

import { createApp } from 'vue'

const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')

provide注入

向根组件注入值

import { createApp } from 'vue'

const app = createApp({
  inject: ['user'],
  template: `
    <div>
      {{ user }}
    </div>
  `
})

app.provide('user', 'Fakin')

unmount

卸载应用实例的根组件。和mount相反

use

安装vue的插件例如vuex router等

version

vue的版本号