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

Posted by Mars . Modified 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 个小伙伴看完了这篇推文。