vue源码讲解系列之二------ render()函数、VNode虚拟节点的实现

最新推荐文章于 2024-07-30 23:09:56 发布

hello，是翠花呀

最新推荐文章于 2024-07-30 23:09:56 发布

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： render vnode 源码

本文链接：https://blog.csdn.net/qq_26769677/article/details/102996335

版权

本文深入探讨Vue实例的render过程，介绍如何创建VNode虚拟节点，以及VNode类的结构和作用。通过分析render函数，理解Vue如何减少真实DOM的渲染成本，实现高效的更新策略。

摘要由CSDN通过智能技术生成

上一篇我们大概了解了vuejs在创建vue实例(new Vue())时候所需经历的主要过程，其中包括data、method、render等初始化。(有讲错的地方或者觉得说得不好的地方还请广大麻油们指正)。接下来我们来了解一下render过程主要干了什么。

首先找到render.js,render.js一开始是导出initRender方法，定义了一些变量往vm上添加了一些属性，还分别添加了私有的和公有的createElement方法，第一个参数vm为当前上下文，私有方法最后一个参数为false，公有为true。

export function initRender (vm: Component) {
   
  vm._vnode = null // the root of the child tree
  vm._staticTrees = null // v-once cached trees
  const options = vm.$options
  const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
  const renderContext = parentVnode && parentVnode.context
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject
  // bind the createElement fn to this instance
  // so that we get proper render context inside it.
  // args order: tag, data, children, normalizationType, alwaysNormalize
  // internal version is used by render functions compiled from templates
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  // normalization is always applied for the public version, used in
  // user-written render functions.
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

  // $attrs & $listeners are exposed for easier HOC creation.
  // they need to be reactive so that HOCs using them are always updated
  const parentData = parentVnode && parentVnode.data

  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
   
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
   
      !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
    }, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
   
      !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
    }, true)
  } else {
   
    defineReactive(vm, '$attrs', parentData && parentData