vue3新特征汇总与源码分析

（备注：vue3使用typescript编写）

何为应用？

const app = Vue.createApp({})

app就是一个应用。

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

1.应用配置：

1. performance：开启浏览器的性能监控。值为true|false
2. optionMergeStrategies：option选项的合并策略
3. globalProperties：扩展实例的属性和方法
4. isCustomElement：判断哪些标签为自定义组件
5. errorHandler：错误时的处理函数
6. 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:

1. version：版本号
2. config：应用的配置信息
3. use：引入插件
4. mixin：引入混合器
5. component：引入组件
6. directive：引入指令
7. mount：挂载组件
8. unmount：卸载组件
9. 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(key: InjectionKey | 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 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:

1. data:值类型为Function,
2. props:值类型为object|array
3. computed:值类型为{ [key: string]: Function | { get: Function, set: Function } }
4. methods:值类型为{ [key: string]: Function }
5. watch:值类型为{ [key: string]: string | Function | Object | Array}
6. emits:类型为Array | Object

DOM：

1. template:值类型为string
2. render:值类型为Function

生命周期钩子：

beforeCreate,
created,
beforeMount,
mounted,
beforeUpdate,
updated,
beforeUnmount,
uonUnmounted,
activated,
deactivated,
renderTracked,
renderTriggered,
errorCaptured

资源：

1. directives:值类型为Object
2. components:值类型为Object

• 自定义指令的参数选项，特别说明：
• 参数为对象：
• export interface ObjectDirective {
  created?: DirectiveHook
  beforeMount?: DirectiveHook
  mounted?: DirectiveHook
  beforeUpdate?: DirectiveHook<T, VNode, V>
  updated?: DirectiveHook<T, VNode, V>
  beforeUnmount?: DirectiveHook
  unmounted?: DirectiveHook
  getSSRProps?: SSRDirectiveHook
  }
• //指令的钩子函数的参数：
  export type DirectiveHook<T = any, Prev = VNode | null, V = any> = (
  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
  }

组合：

1. mixins:值类型为Array
2. extends:值类型为Object | Function
3. provide:值类型为Object | () => Object
4. inject:值类型为Array | { [key: string]: string | Symbol | Object }
5. setup:值类型为Function

杂项：

1. name:值类型为string。组件名称
2. delimiters:
3. inheritAttrs:值类型为boolean

5.实例属性（property）:

1. this.$data:
2. this.$props:
3. this.$el:
4. this.$options:
5. this.$root:
6. this.$parent:
7. this.$slots:
8. this.$refs:
9. this.$attrs:

6.实例方法：

1. this.$watch():
2. this.$emit():
3. this.$forceUpdate():
4. this.$nextTick():

7.指令：

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

8.特殊指令:

1. key:处理列表循环的key
2. ref:处理标签的ref。类似于id
3. is:处理动态组件，绑定组件的命名

9.内置组件：

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

10.响应式API:

import {reactive,readonly} from 'vue'

响应性基础api:

1. reactive: 实现响应式对象，包括嵌套对象都是响应式对象，返回proxy代理对象
2. readonly:实现对象只读，包括嵌套对象都为只读，返回proxy代理对象
3. isProxy:判断是否是代理对象
4. isReactive:判断是否是响应式对象
5. isReadonly:判断是否是只读对象
6. toRaw:入参为响应式对象，返回原始对象。
7. markRaw:标志原始对象，不能再实现响应式对象。
8. shallowReactive:浅相应式对象，只有第一层属性为响应式对象，嵌套对象不属于响应式对象。
9. shallowReadonly:浅只读对象，只有第一层属性为只读对象，嵌套对象不属于只读对象，可以修改嵌套对象的属性。

Refs

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

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

watch:

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

ReactiveEffect,
ReactiveEffectOptions,
DebuggerEvent,
TrackOpTypes,
TriggerOpTypes,
Ref,
ComputedRef,
WritableComputedRef,
UnwrapRef,
ShallowUnwrapRef,
WritableComputedOptions,
ToRefs,
DeepReadonly

11.组合式API:

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

• onBeforeCreate,
  onCreated,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onRenderTracked,
  onRenderTriggered,
  onErrorCaptured

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

setup?: (
this: void,
props: Props &
UnionToIntersection<ExtractOptionProp> &
UnionToIntersection<ExtractOptionProp>,
ctx: SetupContext
) => Promise | 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
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