h()

看到这个函数你可能会有些许困惑，为什么叫h呢？代表着什么呢？

h 其实代表的是 hyperscript 。它是 HTML 的一部分，表示的是超文本标记语言，当我们正在处理一个脚本的时候，在虚拟 DOM 节点中去使用它进行替换已成为一种惯例。这个定义同时也被运用到其他的框架文档中

Hyperscript 它本身表示的是 “生成描述 HTML 结构的脚本”

好了，了解了什么是 h，现在我们来看官方对他的一个定义

定义: 返回一个“虚拟节点” ，通常缩写为 VNode: 一个普通对象，其中包含向 Vue 描述它应该在页面上呈现哪种节点的信息，包括对任何子节点的描述。用于手动编写render

语法

  1. // type only
  2. h('div')
  4. // type + props
  5. h('div', {})
  7. // type + omit props + children
  8. // Omit props does NOT support named slots
  9. h('div', []) // array
  10. h('div', 'foo') // text
  11. h('div', h('br')) // vnode
  12. h(Component, () => {}) // default slot
  14. // type + props + children
  15. h('div', {}, []) // array
  16. h('div', {}, 'foo') // text
  17. h('div', {}, h('br')) // vnode
  18. h(Component, {}, () => {}) // default slot
  19. h(Component, {}, {}) // named slots
  21. // named slots without props requires explicit `null` to avoid ambiguity
  22. h(Component, null, {})

举个栗子

  1. const App = {
  2.     render() {
  3.       return Vue.h('h1', {}, 'Hello Vue3js.cn')
  4.     }
  5. }
  6. Vue.createApp(App).mount('#app')

亲自试一试

都干了些啥

h 接收三个参数

  • type 元素的类型
  • propsOrChildren 数据对象, 这里主要表示(props, attrs, dom props, class 和 style)
  • children 子节点
    1. export function h(type: any, propsOrChildren?: any, children?: any): VNode {
    2. if (arguments.length === 2) {
    3.   if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
    4.     // single vnode without props
    5.     if (isVNode(propsOrChildren)) {
    6.       return createVNode(type, null, [propsOrChildren])
    7.     }
    8.     // props without children
    9.     return createVNode(type, propsOrChildren)
    10.   } else {
    11.     // omit props
    12.     return createVNode(type, null, propsOrChildren)
    13.   }
    14. } else {
    15.   if (isVNode(children)) {
    16.     children = [children]
    17.   }
    18.   return createVNode(type, propsOrChildren, children)
    19. }
    20. }
    _createVNode 做的事情也很简单
  1. function _createVNode(
  2.   type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
  3.   props: (Data & VNodeProps) | null = null,
  4.   children: unknown = null,
  5.   // 更新标志
  6.   patchFlag: number = 0,
  7.   // 自定义属性
  8.   dynamicProps: string[] | null = null,
  9.   // 是否是动态节点，(v-if v-for)
  10.   isBlockNode = false 
  11. ): VNode {
  12.   // type必传参数
  13.   if (!type || type === NULL_DYNAMIC_COMPONENT) {
  14.     if (__DEV__ && !type) {
  15.       warn(`Invalid vnode type when creating vnode: ${type}.`)
  16.     }
  17.     type = Comment
  18.   }
  20.   // Class 类型的type标准化
  21.   // class component normalization.
  22.   if (isFunction(type) && '__vccOpts' in type) {
  23.     type = type.__vccOpts
  24.   }
  26.   // class & style normalization.
  27.   if (props) {
  28.     // props 如果是响应式，clone 一个副本
  29.     if (isProxy(props) || InternalObjectKey in props) {
  30.       props = extend({}, props)
  31.     }
  32.     let { class: klass, style } = props
  34.     // 标准化class, 支持 string , array, object 三种形式
  35.     if (klass && !isString(klass)) {
  36.       props.class = normalizeClass(klass)
  37.     }
  39.     // 标准化style, 支持 array ,object 两种形式 
  40.     if (isObject(style)) {
  41.       // reactive state objects need to be cloned since they are likely to be
  42.       // mutated
  43.       if (isProxy(style) && !isArray(style)) {
  44.         style = extend({}, style)
  45.       }
  46.       props.style = normalizeStyle(style)
  47.     }
  48.   }
  50.   // encode the vnode type information into a bitmap
  51.   const shapeFlag = isString(type)
  52.     ? ShapeFlags.ELEMENT
  53.     : __FEATURE_SUSPENSE__ && isSuspense(type)
  54.       ? ShapeFlags.SUSPENSE
  55.       : isTeleport(type)
  56.         ? ShapeFlags.TELEPORT
  57.         : isObject(type)
  58.           ? ShapeFlags.STATEFUL_COMPONENT
  59.           : isFunction(type)
  60.             ? ShapeFlags.FUNCTIONAL_COMPONENT
  61.             : 0
  63.   if (__DEV__ && shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isProxy(type)) {
  64.     type = toRaw(type)
  65.     warn(
  66.       `Vue received a Component which was made a reactive object. This can ` +
  67.         `lead to unnecessary performance overhead, and should be avoided by ` +
  68.         `marking the component with \`markRaw\` or using \`shallowRef\` ` +
  69.         `instead of \`ref\`.`,
  70.       `\nComponent that was made reactive: `,
  71.       type
  72.     )
  73.   }
  75.   // 构造 VNode 模型
  76.   const vnode: VNode = {
  77.     __v_isVNode: true,
  78.     __v_skip: true,
  79.     type,
  80.     props,
  81.     key: props && normalizeKey(props),
  82.     ref: props && normalizeRef(props),
  83.     scopeId: currentScopeId,
  84.     children: null,
  85.     component: null,
  86.     suspense: null,
  87.     dirs: null,
  88.     transition: null,
  89.     el: null,
  90.     anchor: null,
  91.     target: null,
  92.     targetAnchor: null,
  93.     staticCount: 0,
  94.     shapeFlag,
  95.     patchFlag,
  96.     dynamicProps,
  97.     dynamicChildren: null,
  98.     appContext: null
  99.   }
  101.   normalizeChildren(vnode, children)
  103.   // presence of a patch flag indicates this node needs patching on updates.
  104.   // component nodes also should always be patched, because even if the
  105.   // component doesn't need to update, it needs to persist the instance on to
  106.   // the next vnode so that it can be properly unmounted later.
  108.   // patchFlag 标志存在表示节点需要更新，组件节点一直存在 patchFlag，因为即使不需要更新，它需要将实例持久化到下一个 vnode，以便以后可以正确卸载它
  109.   if (
  110.     shouldTrack > 0 &&
  111.     !isBlockNode &&
  112.     currentBlock &&
  113.     // the EVENTS flag is only for hydration and if it is the only flag, the
  114.     // vnode should not be considered dynamic due to handler caching.
  115.     patchFlag !== PatchFlags.HYDRATE_EVENTS &&
  116.     (patchFlag > 0 ||
  117.       shapeFlag & ShapeFlags.SUSPENSE ||
  118.       shapeFlag & ShapeFlags.TELEPORT ||
  119.       shapeFlag & ShapeFlags.STATEFUL_COMPONENT ||
  120.       shapeFlag & ShapeFlags.FUNCTIONAL_COMPONENT)
  121.   ) {
  122.     // 压入 VNode 栈
  123.     currentBlock.push(vnode)
  124.   }
  126.   return vnode
  127. }

总结

到这里，h 函数已经全部看完了，我们现在知道 h 叫法的由来，其函数内部逻辑只做参数检查，真正的主角是 _createVNode

_createVNode 做的事情有

  1. 标准化 props class
  2. 给 VNode 打上编码标记
  3. 创建 VNode
  4. 标准化子节点

有的同学可能会有疑问🤔️，VNode 最后是怎么转换成真实的 DOM 呢?

这边有单独拉出来讲，请点VNode