vue3新特征汇总与源码分析
（备注：vue3使用typescript编写）
何为应用？
const app = Vue.createApp({})
app就是一个应用。
应用的配置和应用的API就是app应用的属性和方法。
1.应用配置：
- performance：开启浏览器的性能监控。值为true|false
- optionMergeStrategies：option选项的合并策略
- globalProperties：扩展实例的属性和方法
- isCustomElement：判断哪些标签为自定义组件
- errorHandler：错误时的处理函数
- warnHandler：警示时的处理函数
export interface AppConfig {
// @private
readonly isNativeTag?: (tag: string) => boolean
performance: boolean
optionMergeStrategies: Record
globalProperties: Record
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
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
// 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 function 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|array
- computed:值类型为{ [key: string]: Function | { get: Function, set: Function } }
- methods:值类型为{ [key: string]: Function }
- watch:值类型为{ [key: string]: string | Function | Object | Array}
- emits:类型为Array | Object
DOM：
- template:值类型为string
- render:值类型为Function
生命周期钩子：
beforeCreate,
created,
beforeMount,
mounted,
beforeUpdate,
updated,
beforeUnmount,
uonUnmounted,
activated,
deactivated,
renderTracked,
renderTriggered,
errorCaptured
资源：
- directives:值类型为Object
- components:值类型为Object
- 自定义指令的参数选项，特别说明：
- 参数为对象：
- export interface ObjectDirective
{
created?: DirectiveHook
beforeMount?: DirectiveHook
mounted?: DirectiveHook
beforeUpdate?: DirectiveHook<T, VNode
updated?: DirectiveHook<T, VNode
beforeUnmount?: DirectiveHook
unmounted?: DirectiveHook
getSSRProps?: SSRDirectiveHook
} - //指令的钩子函数的参数：
export type DirectiveHook<T = any, Prev = VNode
el: T,
//绑定的修饰符，属性，值，指令名称等信息在binding里面
binding: DirectiveBinding,
vnode: VNode
prevVNode: Prev
) => void - export interface DirectiveBinding
{
instance: ComponentPublicInstance | null
value: V
oldValue: V | null
arg?: string
modifiers: DirectiveModifiers
dir: ObjectDirective
}
组合：
- mixins:值类型为Array
- extends:值类型为Object | Function
- provide:值类型为Object | () => Object
- inject:值类型为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:处理html
- v-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:处理列表循环的key
- ref:处理标签的ref。类似于id
- is:处理动态组件，绑定组件的命名
9.内置组件：
- component:自定义组件，与:is一起使用
- transition:过度组件
- transition-groud:过度组件组
- keep-alive:缓存不活动的组件
- slot:插槽组件
- teleport:转移组件
10.响应式API:
import {reactive,readonly} from 'vue'
响应性基础api:
- reactive: 实现响应式对象，包括嵌套对象都是响应式对象，返回proxy代理对象
- readonly:实现对象只读，包括嵌套对象都为只读，返回proxy代理对象
- isProxy:判断是否是代理对象
- isReactive:判断是否是响应式对象
- isReadonly:判断是否是只读对象
- toRaw:入参为响应式对象，返回原始对象。
- markRaw:标志原始对象，不能再实现响应式对象。
- shallowReactive:浅相应式对象，只有第一层属性为响应式对象，嵌套对象不属于响应式对象。
- shallowReadonly:浅只读对象，只有第一层属性为只读对象，嵌套对象不属于只读对象，可以修改嵌套对象的属性。
Refs
- ref：接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value
- unref：返回对象的原始值
- 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
UnionToIntersection<ExtractOptionProp
ctx: SetupContext
) => Promise
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
directives?: Record
inheritAttrs?: boolean
emits?: (E | EE[]) & ThisType
// TODO infer public instance type based on exposed keys
expose?: string[]
serverPrefetch?(): Promise
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
