vue3新特征和所有的属性，方法汇总及其对应源码分析

vue3新特征汇总与源码分析

（备注：vue3使用typescript编写）

何为应用？

const APP = Vue.createApp({})

app就是一个应用。

应用的配置和应用的API就是app应用的属性和方法。


1.应用配置：

performance：开启浏览器的性能监控。值为true|falseoptionMergeStrategies：option选项的合并策略globalProperties：扩展实例的属性和方法isCustomElement：判断哪些标签为自定义组件errorHandler：错误时的处理函数warnHandler：警示时的处理函数

export interface AppConfig {

// @private

readonly isNativeTag?: (tag: string) => boolean

performance: boolean

optionMergeStrategies: Record<string, OptionMergeFunction>

globalProperties: Record<string, any>

isCustomElement: (tag: string) => boolean

errorHandler?: (

err: unknown,

instance: ComponentPublicInstance | null,

info: string

) => void

warnHandler?: (

msg: string,

instance: ComponentPublicInstance | null,

trace: string

) => void

}


2.应用API:

version：版本号config：应用的配置信息use：引入插件mixin：引入混合器component：引入组件directive：引入指令mount：挂载组件unmount：卸载组件provide：全局提供状态，与inject结合使用

export interface App<HostElement = any> {

version: string

config: AppConfig

use(plugin: Plugin, …options: any[]): this

mixin(mixin: ComponentOptions): this

component(name: string): Component | undefined

component(name: string, component: Component): this

directive(name: string): Directive | undefined

directive(name: string, directive: Directive): this

mount(

rootContainer: HostElement | string,

isHydrate?: boolean

): ComponentPublicInstance

unmount(rootContainer: HostElement | string): void

provide<T>(key: InjectionKey<T> | string, value: T): this

// internal, but we need to expose these for the server-renderer and devtools

_uid: number

_component: ConcreteComponent

_props: Data | null

_container: HostElement | null

_context: AppContext

}

2.1应用上下文：

export functiоn createAppContext(): AppContext {

return {

app: null as any,

config: {

isNativeTag: NO,

performance: false,

globalProperties: {},

optionMergeStrategies: {},

isCustomElement: NO,

errorHandler: undefined,

warnHandler: undefined

},

mixins: [],

components: {},

directives: {},

provides: Object.create(null)

}

}


3.全局API:

4.选项：

Data:

data:值类型为Function,props:值类型为object|arraycomputed:值类型为{ [key: string]: Function | { get: Function, set: Function } }methods:值类型为{ [key: string]: Function }watch:值类型为{ [key: string]: string | Function | Object | Array}emits:类型为Array | Object

DOM：

template:值类型为stringrender:值类型为Function

生命周期钩子：

beforeCreate,

created,

beforeMount,

mounted,

beforeUpdate,

updated,

beforeUnmount,

uonUnmounted,

activated,

deactivated,

renderTracked,

renderTriggered,

errorCaptured

资源：

directives:值类型为Objectcomponents:值类型为Object

自定义指令的参数选项，特别说明：参数为对象：export interface ObjectDirective<T = any, V = any> {

created?: DirectiveHook<T, null, V>

beforeMount?: DirectiveHook<T, null, V>

mounted?: DirectiveHook<T, null, V>

beforeUpdate?: DirectiveHook<T, VNode<any, T>, V>

updated?: DirectiveHook<T, VNode<any, T>, V>

beforeUnmount?: DirectiveHook<T, null, V>

unmounted?: DirectiveHook<T, null, V>

getSSRProps?: SSRDirectiveHook

}//指令的钩子函数的参数：

export type DirectiveHook<T = any, Prev = VNode<any, T> | null, V = any> = (

el: T,

//绑定的修饰符，属性，值，指令名称等信息在binding里面

binding: DirectiveBinding<V>,

vnode: VNode<any, T>,

prevVNode: Prev

) => voidexport interface DirectiveBinding<V = any> {

instance: ComponentPublicInstance | null

value: V

oldValue: V | null

arg?: string

modifiers: DirectiveModifiers

dir: ObjectDirective<any, V>

}

组合：

mixins:值类型为Arrayextends:值类型为Object | Functionprovide:值类型为Object | () => Objectinject:值类型为Array | { [key: string]: string | Symbol | Object }setup:值类型为Function

杂项：

name:值类型为string。组件名称delimiters:inheritAttrs:值类型为boolean

5.实例属性（property）:

this.$data:this.$props:this.$el:this.$options:this.$root:this.$parent:this.$slots:this.$refs:this.$attrs:

6.实例方法：

this.$watch():this.$emit():this.$forceUpdate():this.$nextTick():

7.指令：

v-text:处理文本v-html:处理htmlv-show:显示与隐藏，dom已经渲染好v-if:满足条件才开始渲染，否则不渲染v-else:满足条件才开始渲染，否则不渲染v-else-if:满足条件才开始渲染，否则不渲染v-for:遍历列表v-on:绑定事件v-bind:绑定属性v-model:绑定表单的变量v-slot:绑定插槽具名，缩写：#v-one:标签只渲染一次v-is:绑定动态组件v-pre:v-cloak:

8.特殊指令:

key:处理列表循环的keyref:处理标签的ref。类似于idis:处理动态组件，绑定组件的命名

9.内置组件：

component:自定义组件，与:is一起使用transition:过度组件transition-groud:过度组件组keep-alive:缓存不活动的组件slot:插槽组件teleport:转移组件

10.响应式API:

import {reactive,readonly} from ‘vue’

响应性基础api:

reactive: 实现响应式对象，包括嵌套对象都是响应式对象，返回proxyX对象readonly:实现对象只读，包括嵌套对象都为只读，返回proxyX对象isProxy:判断是否是X对象isReactive:判断是否是响应式对象isReadonly:判断是否是只读对象toRaw:入参为响应式对象，返回原始对象。markRaw:标志原始对象，不能再实现响应式对象。shallowReactive:浅相应式对象，只有第一层属性为响应式对象，嵌套对象不属于响应式对象。shallowReadonly:浅只读对象，只有第一层属性为只读对象，嵌套对象不属于只读对象，可以修改嵌套对象的属性。

Refs

ref：接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .valueunref：返回对象的原始值toRef:可以用来为源响应式对象上的 property 新创建一个 ref。然后可以将 ref 传递出去，从而保持对其源 property 的响应式连接。（即把响应式对象的单个属性转换成ref对象）toRefs:将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的ref。（即把响应式对象的每个属性都转换成ref对象）isRef:判断是否是Ref对象customRef:创建一个自定义的ref函数shallowRef:创建一个 ref，它跟踪自己的 .value 更改，但不会使其值成为响应式的。triggerRef:手动执行与 shallowRef 关联的任何副作用

Computed:使用 getter 函数，并为从 getter 返回的值返回一个不变的响应式 ref 对象。

watch:

watchEffect:在响应式地跟踪其依赖项时立即运行一个函数，并在更改依赖项时重新运行它。

ReactiveEffect,

ReactiveEffectOptions,

DebuggerEvent,

TrackOpTypes,

TriggerOpTypes,

Ref,

ComputedRef,

WritableComputedRef,

UnwrapRef,

ShallowUnwrapRef,

WritableComputedOptions,

ToRefs,

DeepReadonly

11.组合式API:

setup：值类型为Function。在创建组件
之前执行，返回值自动嵌入实例的属性中生命周期钩子(只能在setup函数中使用): 只能在 setup() 期间同步使用

onBeforeCreate,

onCreated,

onBeforeMount,

onMounted,

onBeforeUpdate,

onUpdated,

onBeforeUnmount,

onUnmounted,

onActivated,

onDeactivated,

onRenderTracked,

onRenderTriggered,

onErrorCaptured

provide/inject :getCurrentInstance getCurrentInstance
只能在 setup 或生命周期钩子中调用

setup?: (

this: void,

props: Props &

UnionToIntersection<ExtractOptionProp<Mixin>> &

UnionToIntersection<ExtractOptionProp<Extends>>,

ctx: SetupContext<E>

) => Promise<RawBindings> | RawBindings | RenderFunction | void

name?: string

template?: string | object // can be a direct DOM node

// Note: we are intentionally using the signature-less `Function` type here

// since any type with signature will cause the whole inference to fail when

// the return expression contains reference to `this`.

// Luckily `render()` doesn’t need any arguments nor does it care about return

// type.

render?: Function

components?: Record<string, Component>

directives?: Record<string, Directive>

inheritAttrs?: boolean

emits?: (E | EE[]) & ThisType<void>

// TODO infer public instance type based on exposed keys

expose?: string[]

serverPrefetch?(): Promise<any>

const {

// composition

mixins,

extends: extendsOptions,

// state

data: dataOptions,

computed: computedOptions,

methods,

watch: watchOptions,

provide: provideOptions,

inject: injectOptions,

// assets

components,

directives,

// lifecycle

beforeMount,

mounted,

beforeUpdate,

updated,

activated,

deactivated,

beforeDestroy,

beforeUnmount,

destroyed,

unmounted,

render,

renderTracked,

renderTriggered,

errorCaptured,

// public API

expose

} = options