vue3 全局 API

应用实例额

createApp

demo

mount

demo

unmount

卸载一个已挂载的应用实例,会触发该应用组件树内所有组件的卸载生命周期钩子

component

demo

ComponentA 为全局组册（被使用的组件无法在生产打包时被自动移除 (也叫“tree-shaking”)） ComponentB 为局部组册

directive

实现给dom 添加color
demo

el：指令绑定到的元素。这可以用于直接操作 DOM。

binding：一个对象，包含以下属性。

    value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
    oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
    arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
    modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
    instance：使用该指令的组件实例。
    dir：指令的定义对象。
    vnode：代表绑定元素的底层 VNode。

prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

use

demo

eg. vue-router

mixin(不推荐)

全局的 mixin 会作用于应用中的每个组件实例

官方不推荐，若要逻辑服用，推荐使用组合式函数来代替

定一个mixin.js

注入
eg.局部

provide（inject）

provide 和 inject 是在Vue中用于跨层级组件通信的机制。通过 provide，父组件可以向其所有子孙组件提供数据或方法；而通过 inject，子孙组件可以在其上层组件中查找并使用这些提供的数据或方法 类似于react 的 createContext

使用：

<!-- Parent.vue -->
<template>
  <div>
    <h2>父组件</h2>
    <Child />
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child,
  },
  provide: {
    message: 'Hello from parent!',
    showMessage() {
      console.log(this.message);
    },
  },
};
</script>

<!-- Child.vue -->
<template>
  <div>
    <h3>子组件</h3>
    <p>{{ injectedMessage }}</p>
    <button @click="callInjectedMethod">调用注入方法</button>
  </div>
</template>

<script>
export default {
  inject: ['message', 'showMessage'],
  computed: {
    injectedMessage() {
      return this.message;
    },
  },
  methods: {
    callInjectedMethod() {
      this.showMessage();
    },
  },
};
</script>

全局组册：

import { createApp } from 'vue'

const app = createApp(/* ... */)

app.provide('message', 'hello')

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 'hello'
  }
}

请注意，provide 和 inject 并不是响应式的，这意味着当提供的数据发生变化时，不会自动触发子组件的更新。如果您需要响应式的数据传递，可以使用Vuex或组合式API中的 reactive 和 readonly。

version

import { version } from 'vue'

console.log(version)

config

vue app.config 详解

通用

nextTick

nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise

<script>
import { nextTick } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    async increment() {
      this.count++

      // DOM 还未更新
      console.log(document.getElementById('counter').textContent) // 0

      await nextTick()
      // DOM 此时已经更新
      console.log(document.getElementById('counter').textContent) // 1
    }
  }
}
</script>

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>

defineComponent

第一个参数是一个组件选项对象。返回值将是该选项对象本身，因为该函数实际上在运行时没有任何操作，仅用于提供类型推导。

defineAsyncComponent

defineAsyncComponent 方法接收一个返回 Promise 的加载函数,Promise 的 resolve 回调方法应该在从服务器获得组件定义时调用。

结合vue3的Suspense 使用 == (类似于react 的 Suspense 和 lazy 的组合)

补充： ES 模块动态导入也会返回一个 Promise

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})