vue3的api使用

createApp()

// 内敛根组建
import { createApp } from 'vue'
const app = createApp({})

// 导入根组建
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
1
2
3
4
5
6
7
8

app.mount()

import { createApp } from 'vue'
const app = createApp(/* ... */)
const vm = app.mount('#app')
vm.unmount() // 在需要卸载应用时，调用
1
2
3
4

app.unmount() 可以卸载局部组件，而不影响整个应用，下面是手动卸载

import { defineComponent } from 'vue'
export default defineComponent({
	methods:{
		handleUnmount(){
			this.$el.parentElement.removeChild(this.$el)
			this.$destroy()
		}
	}
})
1
2
3
4
5
6
7
8
9

app.component()

import { createApp } from 'vue'
const app = createApp({})
// 得到一个已注册的组件
const MyComponent = app.component('my-component')
1
2
3
4

app.directive()

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

<template>
  <input v-focus />
</template>
<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

在没有使用 <script setup> 的情况下，自定义指令需要通过 directives 选项注册：
export default {
  setup() {},
  directives: {
    // 在模板中启用 v-focus
    focus: {}
  }
}

全局注册
const app = createApp({})
// 使 v-focus 在所有组件中都可用
app.directive('focus', {})

一个指令的定义对象可以提供几种钩子函数 (都是可选的)：
const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}
传参，和接受参数
<div v-example:foo.bar="baz">
下面是上述binding参数打印的值
{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* `baz` 的值 */,
  oldValue: /* 上一次更新时 `baz` 的值 */
}
传参动态写法
<div v-example:[arg]="value"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

app.use()

import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'
const app = createApp({})
app.use(MyPlugin)

// MyPlugin 插件
export default {
  install: (app, options) => {
    // 注入一个全局可用的 $translate() 方法
    app.config.globalProperties.$translate = (key) => {
      // 获取 `options` 对象的深层属性
      // 使用 `key` 作为索引
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

// 可使用
<h1>{{ $translate('greetings.hello') }}</h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

app.mixin()

// Mixins 在 Vue 3 支持主要是为了向后兼容，若要进行逻辑复用，推荐用组合式函数来替代。

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'
// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)
  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  // 通过返回值暴露所管理的状态
  return { x, y }
}

// 使用案例
<template>Mouse position is at: {{ x }}, {{ y }}</template>
<script setup>
import { useMouse } from './mouse.js'
const { x, y } = useMouse()
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

app.provide()

import { createApp } from 'vue'
const app = createApp()
app.provide('message', 'hello')

import { inject } from 'vue'
export default {
  setup() {
    console.log(inject('message')) // 'hello'
  }
}
1
2
3
4
5
6
7
8
9
10

app.runWithContext() 使用当前应用作为注入上下文执行回调函数。

import { inject } from 'vue'
app.provide('id', 1)
const injected = app.runWithContext(() => {
  return inject('id')
})
console.log(injected) // 1
1
2
3
4
5
6

app.version

export default {
  install(app) {
    console.log( app.version )
  }
}
1
2
3
4
5

app.config

// 可以在挂载应用前更改这些属性
import { createApp } from 'vue'
const app = createApp(/* ... */)
console.log(app.config)
1
2
3
4

app.config.errorHandler
app.config.warnHandler
app.config.performance
app.config.compilerOptions
app.config.globalProperties

app.config.globalProperties.msg = 'hello'
1

app.config.optionMergeStrategies

const app = createApp({
  // 自身的选项
  msg: 'Vue',
  // 来自 mixin 的选项
  mixins: [
    {
      msg: 'Hello '
    }
  ],
  mounted() {
    // 在 this.$options 上暴露被合并的选项
    console.log(this.$options.msg)
  }
})

// 为 `msg` 定义一个合并策略函数
app.config.optionMergeStrategies.msg = (parent, child) => {
  return (parent || '') + (child || '')
}

app.mount('#app')// 打印 'Hello Vue'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

version

import { version } from 'vue'
console.log(version)
1
2

nextTick()

// 等待下一次 DOM 更新刷新的工具方法。
function nextTick(callback?: () => void): Promise<void>
nextTick() 可以在状态改变后立即使用，以等待 DOM 更新完成。你可以传递一个回调函数作为参数，或者 await 返回的 Promise。

<template>
  <button id="counter" @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const count = ref(0)
async function increment() {
  count.value++
  // DOM 还未更新
  console.log(document.getElementById('counter').textContent) // 0
  await nextTick()
  // DOM 此时已经更新
  console.log(document.getElementById('counter').textContent) // 1
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

defineComponent()

import { ref, h } from 'vue'

const Comp = defineComponent(
  (props) => {
    // 就像在