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
updated？： DirectiveHook
beforeUnmount？： DirectiveHook
unmounted？： DirectiveHook
getSSRProps？： SSRDirectiveHook
}
//指令的鉤子函式的引數：
export type DirectiveHook
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
UnionToIntersection
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
