Vue工作流程及各类型对象API关系

Posted by Mars at

创建一个新的Vue app的整个流程,及各类型对象的API,和他们之间的交联关系梳理。

创建一个Vue app整体流程梳理

Vue app整体流程梳理

Vue模块中暴露的API有哪些?

这些API都可以从vue中直接导入获取。

import { <api> } from 'vue'

渲染

  • createApp:传入根组件配置对象,创建应用实例,并返回创建的应用实例。
  • createSSRApp:传入根组件,创建SSR应用实例。
  • render:手动渲染VNode的函数。
  • hydrate:用于SSR,将服务端渲染好的html中,用传入本地的剩余部分js为页面注水渲染。

SFC中CSS工具

应该很少使用到。

  • useCssModule: 选择使用哪个CSS Module,传入一个字符串指定。默认是’$style‘
  • useCssVars:

原生DOM组件

  • Transition
  • TransitionProps (TS接口)
  • TransitionGroup
  • TransitionGroupProps (TS接口)

版本号

  • version: Vue版本号,目前是3.0.11

响应式API

@vue/reactivity

  • 核心 Core
    • reactive: 创建响应式对象 (__v_isReactive === true)
    • ref: 创建响应式变量
    • readonly: 创建只读对象 (__v_isReadonly === true)
  • 小工具 Utilities
    • unref: 把ref类型对象变回原始值 (返回ref.value),不是ref类型的原样返回
    • proxyRefs:
    • isRef:判断是否是ref类型
    • toRef: 接受(object,key),将某一对象obj的某一key值变成Ref
    • toRefs: 接受一个reactive对象,将其内部所有属性变成ref类型,从而可以对外解构赋值
    • isReactive: 判断是否是reactive对象。如果传入一个只读对象,获取它的Raw原始值,继续判断是否是响应式对象。
    • isReadonly: 判断是否是readonly对象 (ReactiveFlags.IS_READONLY === true)
    • isProxy: 判断是否是经vue转换后的proxy。(是isReactive和isReadonly的或值)
  • 高级 Advanced
    • customRef: 创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。
    • triggerRef:与shallowRef配合使用。因为shallowRef的内部值不是响应式的,这会导致包含它们的watch和computed无法响应它们的更新,这时可以通过trigger(shallowRef)进行手动触发。(一般也很少用吧。。- -||)
    • shallowRef:创建浅ref。这种Ref只跟踪它内部这个value的变化,而这个value本身不会变成响应式的。例如:
  let a = {} 
  let b = shallowRef(a)
  a = {name: 'Mars'}
  b.value // {name: 'Mars'}
  isReactive(a) //false
  • 高级 Advanced
    • shallowReactive:与shallowRef同理,创建一个浅响应式对象,只响应这个对象本身的更新(单层转化),而对象自身内部不会变成响应式。
    • shallowReadonly:创建一个既shallow又readonly的对象。
    • markRaw:置一个reactive对象的__v_skip属性为true,也就是说它将永远不会变成响应式对象。
    • toRaw:获取一个reactive对象的原始值。如果reactive是多层嵌套的,一直向内查询__v_raw属性,直到最内层非响应式的原始值。 (不是reactive对象类型,原样返回,包括ref类型)

计算和监听

  • computed: 创建计算属性。传入一个函数(getter)或两个函数(getter和setter),函数内包含的所有reactive和ref响应式变量改变时,计算属性自动重新计算。
  • watchEffect: 传入一个函数,立即运行,无需指定侦听的具体参数,然后自动跟踪其内部所有的响应式变量 —— 当任何一个响应式变量改变时立即重新运行函数。
  • watch: 侦听器函数。传入两个参数,第一个是侦听的参数,第二个是回调函数(当侦听的参数变化时执行。)

生命周期钩子

这些都是在Setup中使用的钩子函数。

不多赘述。不熟悉的引用官网说明。

  • onBeforeMount
  • onMounted
  • onBeforeUpdate
  • onUpdated
  • onBeforeUnmount
  • onUnmounted
  • onActivated: 被 keep-alive 缓存的组件激活时调用。
  • onDeactivated: 被 keep-alive 缓存的组件停用时调用。
  • onRenderTracked: 跟踪虚拟 DOM 重新渲染时调用。钩子接收 debugger event 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。
  • onRenderTriggered: 当虚拟 DOM 重新渲染被触发时调用。和 renderTracked 类似,接收 debugger event 作为参数。此事件告诉你是什么操作触发了重新渲染,以及该操作的目标对象和键。
  • onErrorCaptured: 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。

provide / inject

依赖注入,只能在Setup中使用。

  • provide:传入两个参数,第一个是provide变量的名称,第二个是具体的值。
    • provide的值可以是ref或reactive类型,在inject后依然保持响应性。
    • 一般建议provide/inject的响应式值,只从provide的一方修改,inject一方只读取值不修改。(可以在provide的时候将变量变为readonly)
  • inject: 可传入两个参数。第一个是接收的provide变量名称,第二个是可选参数,表示默认值。

nextTick

  • nextTick: 传入一个回调函数,在下一个DOM更新周期执行。(用来防止修改响应式数据,DOM还没有更新,这时访问DOM中数据是旧数据的现象。)

组件、props、emit

  • defineComponent:
  • defineAsyncComponent:
  • defineProps:
  • defineEmit:
  • useContext:

渲染、VNode相关

  • h: 传入三个参数:type、props、children,返回创建的VNode对象。
  • createVNode
  • cloneVNode
  • mergeProps
  • isVNode

VNode的四种类型(均为Symbol类型变量):

  • Fragment
  • Text
  • Comment
  • Static

原生组件

  • Teleport
    • TeleportProps (TS interface)
  • Suspense
    • SuspenseProps (TS interface)
  • KeepAlive
    • KeepAliveProps (TS interface)
  • BaseTransition
    • BaseTransitionProps (TS interface)

指令相关

  • withDirectives

服务端渲染相关

  • useSSRContext
  • ssrContextKey

自定义渲染器 API

  • createRenderer
  • createHydrationRenderer
  • queuePostFlushCb
  • warn
  • handleError
  • callWithErrorHandling
  • callWithAsyncErrorHandling
  • ErrorCodes
  • resolveComponent
  • resolveDirective
  • resolveDynamicComponent
  • registerRuntimeCompiler
  • isRuntimeOnly
  • useTransitionState
  • resolveTransitionHooks
  • setTransitionHooks
  • getTransitionRawChildren
  • initCustomFormatter

devTools相关

  • devtools
  • setDevtoolsHook

其他

  • getCurrentInstance: 只能在setup中使用,用于获取当前组件实例。

Vue定义的TS类型

Vue中直接导出了所有重要的TS类型,供开发者使用。

  • 响应式相关
    • ReactiveEffect
    • ReactiveEffectOptions
    • DebuggerEvent
    • TrackOpTypes
    • TriggerOpTypes
    • Ref
    • ComputedRef
    • WritableComputedRef
    • UnwrapRef
    • ShallowUnwrapRef
    • WritableComputedOptions
    • ToRefs
    • DeepReadonly
  • 侦听器相关
    • WatchEffect
    • WatchOptions
    • WatchOptionsBase
    • WatchCallback
    • WatchSource
    • WatchStopHandle
  • 应用实例相关
    • App
    • AppConfig
    • AppContext
    • Plugin
    • CreateAppFunction
    • OptionMergeFunction
  • VNode相关
    • VNode
    • VNodeChild
    • VNodeTypes
    • VNodeProps
    • VNodeArrayChildren
    • VNodeNormalizedChildren
  • 组件相关
    • Component
    • ConcreteComponent
    • FunctionalComponent
    • ComponentInternalInstance
    • SetupContext
    • ComponentCustomProps
    • AllowedComponentProps
    • DefineComponent
    • ComponentPublicInstance
    • ComponentCustomProperties
  • 组件配置项
    • ComponentOptions
    • ComponentOptionsMixin
    • ComponentOptionsWithoutProps
    • ComponentOptionsWithObjectProps
    • ComponentOptionsWithArrayProps
    • ComponentCustomOptions
    • ComponentOptionsBase
    • RenderFunction
    • MethodOptions
    • ComputedOptions
    • AsyncComponentOptions
    • AsyncComponentLoader
  • emit相关
    • EmitsOptions
    • ObjectEmitsOptions
  • 渲染器相关
    • Renderer
    • RendererNode
    • RendererElement
    • HydrationRenderer
    • RendererOptions
    • RootRenderFunction
  • slot相关
    • Slot
    • Slots
  • 指令相关
    • Directive
    • DirectiveBinding
    • DirectiveHook
    • ObjectDirective
    • FunctionDirective
    • DirectiveArguments
  • InjectionKey
  • HMRRuntime
  • SuspenseBoundary
  • TransitionState
  • TransitionHooks
Keywords: Vue
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。