createApp()

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

app.mount()

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

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

import { defineComponent } from 'vue'
export default defineComponent({methods:{handleUnmount(){this.$el.parentElement.removeChild(this.$el)this.$destroy()}}
})

app.component()

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

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-focusfocus: {}}
}全局注册
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>

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>

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.pageXy.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>

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

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

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

app.version

export default {install(app) {console.log( app.version )}
}

app.config

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

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

app.config.globalProperties.msg = 'hello'

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'

version

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

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) // 0await nextTick()// DOM 此时已经更新console.log(document.getElementById('counter').textContent) // 1
}
</script>

defineComponent()

import { ref, h } from 'vue'const Comp = defineComponent((props) => {// 就像在 <script setup> 中一样使用组合式 APIconst count = ref(0)return () => {// 渲染函数或 JSXreturn h('div', count.value)}},// 其他选项，例如声明 props 和 emits。{props: {/* ... */}}
)因为 defineComponent() 是一个函数调用，
所以它可能被某些构建工具认为会产生副作用，如 webpack。
即使一个组件从未被使用，也有可能不被 tree-shake。
为了告诉 webpack 这个函数调用可以被安全地 tree-shake，
我们可以在函数调用之前添加一个 /*#__PURE__*/ 形式的注释：
export default /*#__PURE__*/ defineComponent(/* ... */)

defineAsyncComponent()
defineCustomElement()
Setup 基本使用

<template><button @click="count++">{{ count }}</button>
</template>
<script>
import { ref } from 'vue'
export default {setup() {const count = ref(0)// 返回值会暴露给模板和其他的选项式 API 钩子return {count // 它会自动浅层解包，因此你无须再在模板中为它写 .value}},mounted() {console.log(this.count) // 通过 this 访问时也会同样如此解包。}
}
</script>

访问 Props

export default {props: {title: String},setup(props) {console.log(props.title)}
}import { toRefs, toRef } from 'vue'
export default {setup(props) {// 将 `props` 转为一个其中全是 ref 的对象，然后解构const { title } = toRefs(props)// `title` 是一个追踪着 `props.title` 的 refconsole.log(title.value)// 或者，将 `props` 的单个属性转为一个 refconst title = toRef(props, 'title')}
}

Setup 上下文

export default {setup(props, { attrs, slots, emit, expose }) {console.log(attrs)// 透传 Attributes（非响应式的对象，等价于 $attrs）console.log(slots)// 插槽（非响应式的对象，等价于 $slots）console.log(emit)// 触发事件（函数，等价于 $emitconsole.log(expose)// 暴露公共属性（函数）// attrs, slots 是有状态的，但是他的属性没有状态，// 如果你想要基于 attrs 或 slots 的改变来执行副作用，// 那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。}
}// 暴露公共属性
// expose 函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，
// 将仅能访问 expose 函数暴露出的内容：
export default {setup(props, { expose }) {// 让组件实例处于 “关闭状态”// 即不向父组件暴露任何东西expose()const publicCount = ref(0)const privateCount = ref(0)// 有选择地暴露局部状态expose({ count: publicCount })}
}

与渲染函数一起使用

import { h, ref } from 'vue'
export default {setup(props, { expose }) {const count = ref(0)const increment = () => ++count.valueexpose({ increment})return () => h('div', count.value)}
}

ref()

const count = ref(0)
console.log(count.value) // 0count.value++
console.log(count.value) // 1

computed()

// 创建一个只读的计算属性 ref：
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误

reactive()
readonly()
watchEffect()
watchPostEffect()
watchSyncEffect()
watch()