AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue3 源码学习，实现一个 mini-vue（七）：构建 renderer 渲染器之 ELEMENT 节点的挂载

2023-01-09 589
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue3 源码学习，实现一个 mini-vue（七）：构建 renderer 渲染器之 ELEMENT 节点的挂载

highlight: vs2015

theme: juejin

前言

原文来自 我的个人博客

自上一章我们成功构建了 h 函数创建 VNode 后，这一章的目标就是要在 VNode 的基础上构建 renderer 渲染器。

根据上一章的描述，我们知道在 packages/runtime-core/src/renderer.ts 中存放渲染器相关的内容。

Vue 提供了一个 baseCreateRenderer 的函数（这个函数很长有 2000 多行代码~），它会返回一个对象，我们把返回的这个对象叫做 renderer 渲染器。

image.png

对于该对象而言，提供了三个方法：

  1. render：渲染函数
  2. hydrate：服务端渲染相关
  3. createApp：初始化方法

因为这里代码实在太长了，所以我们将会以下面两个思想来阅读以及实现：

  1. 阅读：没有使用的代码就当做不存在
  2. 实现：用最少的代码来实现

接下来就让我们开始吧，Here we go~

1. 案例分析

我们依然从上一章的测试案例开始讲：

<script>
  const { h, render } = Vue

  const vnode = h(
    'div',
    {
      class: 'test'
    },
    'hello render'
  )

  console.log(vnode)

  render(vnode, document.querySelector('#app'))
</script>

上一章中我们跟踪了 h 函数的创建，但是并没有提 render 函数。

实际上在 h 函数创建了 VNode 后，就是通过 render 渲染函数将 VNode 渲染成真实 DOM 的。至于其内部究竟是如何工作的，我们从源码中去找答案吧~

2. 源码阅读：初见 render 函数，ELEMENT 的挂载操作

  1. 我们直接到源码 packages/runtime-core/src/renderer.ts 的第 2327 行进行debugger：

image.png

  1. 可以看到 render 函数内部很简单，对 vnode 进行判断是否为 null，此时我们的vnode 是从 h 函数得到的 vnode 肯定不为空，所以会执行 patch 方法，最后将 vnode 赋值到 container._vnode 上。我们进入到 patch 方法。
  2. patch 的是贴片、补丁的意思，在这里 patch 表示 更新 节点。这里传递的参数我们主要关注 前三个。container._vnode 表示 旧节点（n1），vnode 表示 新节点（n2），container 表示 容器。我们进入 patch 方法：

image.png

  1. 上图讲得很明白了，我们进入 processElement 方法：

image.png

  1. 因为当前为 挂载操作，所以 没有旧节点，即：n1 === null，进入 mountElement 方法：

image.png

  1. 在 mountElement 方法中，代码首先会进入到 hostCreateElement 方法中，根据上图我们也知道，hostCreateElement 方法实际上就是调用了 document.createElement 方法创建了 Element 并返回，但是有个点可以提的是，这个方法在 packages/runtime-dom/src/nodeOps.ts，我们之前调试的代码都在 packages/runtime-core/src/renderer.ts。这是因为 vue 为了保持兼容性，把所有和浏览器相关的 API 封装到了 runtime-dom 中。此时 el 和 vnode.el 的值为 createElement 生成的 div 实例。我们代码接着往下跑：

image.png

  1. 进入 hostSetElementText，而 hostSetElementText 实际上就是执行 el.textContent = text，hostSetElementText 同样 在 packages/runtime-dom/src/nodeOps.ts 中（和浏览器有关的 API 都在 runtime-dom，下面不再将）。我们接着调试：

image.png

  1. 因为此时我们的 prop 有值， 所以会进入这个 for 循环，看上面的图应该很明白了，就是添加了 class 属性，接着程序跳出 patchClass ，跳出 patchProp ，跳出 for 循环，if 结束。如果此时触发 div 的 outerHTML 方法，就会得到 <div class="test">hello render</div>
  2. 到现在 dom 已经构建好了，最后就只剩下 挂载 操作了
  3. 继续执行代码将进入 hostInsert(el, container, anchor) 方法：

image.png

  1. 可以看到 hostInsert 方法就是执行了 insertBefore，而我们知道 insertBefore 可以将 ·dom· 插入到执行节点
  2. 那么到这里，我们已经成功的把 div 插入到了 dom 树中，执行完成 hostInsert 方法之后，浏览器会出现对应的 div.
  3. 至此，整个 render 执行完成

总结：

由以上代码可知：

  1. 整个挂载 Element | Text_Children 的过程分为以下步骤：

    1. 触发 patch 方法
    2. 根据 shapeFlag 的值，判定触发 processElement 方法

    3. 在 processElement 中，根据 是否存在 旧VNode 来判定触发 挂载 还是 更新 的操作

      1. 挂载中分成了4大步：

        1. 生成 div
        2. 处理 textContent
        3. 处理 props
        4. 挂载 dom
    4. 通过 container._vnode = vnode 赋值 旧 VNode

3. 代码实现：构建 renderer 基本架构

整个 基本架构 应该分为 三部分 进行处理：

  1. renderer 渲染器本身，我们需要构建出 baseCreateRenderer 方法

  2. 我们知道所有和 dom 的操作都是与 core 分离的，而和 dom 的操作包含了 两部分：

    1. Element 操作：比如 insert、createElement 等，这些将被放入到 runtime-dom 中
    2. props 操作：比如 设置类名，这些也将被放入到 runtime-dom 中

renderer 渲染器本身

  1. 创建 packages/runtime-core/src/renderer.ts 文件：
import { ShapeFlags } from 'packages/shared/src/shapeFlags'
import { Fragment } from './vnode'

/**
 * 渲染器配置对象
 */
export interface RendererOptions {
  /**
   * 为指定 element 的 prop 打补丁
   */
  patchProp(el: Element, key: string, prevValue: any, nextValue: any): void
  /**
   * 为指定的 Element 设置 text
   */
  setElementText(node: Element, text: string): void
  /**
   * 插入指定的 el 到 parent 中，anchor 表示插入的位置，即：锚点
   */
  insert(el, parent: Element, anchor?): void
  /**
   * 创建指定的 Element
   */
  createElement(type: string)
}

/**
 * 对外暴露的创建渲染器的方法
 */
export function createRenderer(options: RendererOptions) {
  return baseCreateRenderer(options)
}

/**
 * 生成 renderer 渲染器
 * @param options 兼容性操作配置对象
 * @returns
 */
function baseCreateRenderer(options: RendererOptions): any {
  /**
   * 解构 options，获取所有的兼容性方法
   */
  const {
    insert: hostInsert,
    patchProp: hostPatchProp,
    createElement: hostCreateElement,
    setElementText: hostSetElementText
  } = options

  const patch = (oldVNode, newVNode, container, anchor = null) => {
    if (oldVNode === newVNode) {
      return
    }

    const { type, shapeFlag } = newVNode
    switch (type) {
      case Text:
        // TODO: Text
        break
      case Comment:
        // TODO: Comment
        break
      case Fragment:
        // TODO: Fragment
        break
      default:
        if (shapeFlag & ShapeFlags.ELEMENT) {
          // TODO: Element
        } else if (shapeFlag & ShapeFlags.COMPONENT) {
          // TODO: 组件
        }
    }
  }

  /**
   * 渲染函数
   */
  const render = (vnode, container) => {
    if (vnode == null) {
      // TODO: 卸载
    } else {
      // 打补丁（包括了挂载和更新）
      patch(container._vnode || null, vnode, container)
    }
    container._vnode = vnode
  }
  return {
    render
  }
}

封装 Element 操作

  1. 创建 packages/runtime-dom/src/nodeOps.ts 模块，对外暴露 nodeOps 对象：
const doc = document

export const nodeOps = {
  /**
   * 插入指定元素到指定位置
   */
  insert: (child, parent, anchor) => {
    parent.insertBefore(child, anchor || null)
  },

  /**
   * 创建指定 Element
   */
  createElement: (tag): Element => {
    const el = doc.createElement(tag)

    return el
  },

  /**
   * 为指定的 element 设置 textContent
   */
  setElementText: (el, text) => {
    el.textContent = text
  }
}

封装 props 操作

  1. 创建 packages/runtime-dom/src/patchProp.ts 模块，暴露 patchProp 方法：
const doc = document

export const nodeOps = {
  /**
   * 插入指定元素到指定位置
   */
  insert: (child, parent, anchor) => {
    parent.insertBefore(child, anchor || null)
  },

  /**
   * 创建指定 Element
   */
  createElement: (tag): Element => {
    const el = doc.createElement(tag)

    return el
  },

  /**
   * 为指定的 element 设置 textContent
   */
  setElementText: (el, text) => {
    el.textContent = text
  }
}
  1. 创建 packages/runtime-dom/src/modules/class.ts 模块，暴露 patchClass 方法：
/**
 * 为 class 打补丁
 */
export function patchClass(el: Element, value: string | null) {
  if (value == null) {
    el.removeAttribute('class')
  } else {
    el.className = value
  }
}
  1. 在 packages/shared/src/index.ts 中，写入 isOn 方法：
const onRE = /^on[^a-z]/
/**
 * 是否 on 开头
 */
export const isOn = (key: string) => onRE.test(key)

三大块 全部完成，标记着整个 renderer 架构设计完成。

4. 代码实现：基于 renderer 完成 ELEMENT 节点挂载

  1. 在 packages/runtime-core/src/renderer.ts 中，创建 processElement 方法：
/**
 * Element 的打补丁操作
 */
const processElement = (oldVNode, newVNode, container, anchor) => {
  if (oldVNode == null) {
    // 挂载操作
    mountElement(newVNode, container, anchor)
  } else {
    // TODO: 更新操作
  }
}

/**
 * element 的挂载操作
 */
const mountElement = (vnode, container, anchor) => {
  const { type, props, shapeFlag } = vnode

  // 创建 element
  const el = (vnode.el = hostCreateElement(type))

  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
    // 设置 文本子节点
    hostSetElementText(el, vnode.children as string)
  } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
    // TODO: 设置 Array 子节点
  }

  // 处理 props
  if (props) {
    // 遍历 props 对象
    for (const key in props) {
      hostPatchProp(el, key, null, props[key])
    }
  }

  // 插入 el 到指定的位置
  hostInsert(el, container, anchor)
}

const patch = (oldVNode, newVNode, container, anchor = null) => {
  if (oldVNode === newVNode) {
    return
  }

  const { type, shapeFlag } = newVNode
  switch (type) {
    case Text:
      // TODO: Text
      break
    case Comment:
      // TODO: Comment
      break
    case Fragment:
      // TODO: Fragment
      break
    default:
      if (shapeFlag & ShapeFlags.ELEMENT) {
        processElement(oldVNode, newVNode, container, anchor)
      } else if (shapeFlag & ShapeFlags.COMPONENT) {
        // TODO: 组件
      }
  }
}

根据源码的逻辑，在这里主要做了五件事情：

  1. 区分挂载、更新
  2. 创建 Element
  3. 设置 text
  4. 设置 class
  5. 插入 DOM 树

5. 代码实现：合并渲染架构

我们知道，在源码中，我们可以直接：

const { render } = Vue

render(vnode, document.querySelector('#app'))

但是在我们现在的代码，发现是 不可以 直接这样导出并使用的。

所以这就是本小节要做的 得到可用的 render 函数

  1. 创建 packages/runtime-dom/src/index.ts：
import { createRenderer } from '@vue/runtime-core'
import { extend } from '@vue/shared'
import { nodeOps } from './nodeOps'
import { patchProp } from './patchProp'

const rendererOptions = extend({ patchProp }, nodeOps)

let renderer

function ensureRenderer() {
  return renderer || (renderer = createRenderer(rendererOptions))
}

export const render = (...args) => {
  ensureRenderer().render(...args)
}
  1. 在 packages/runtime-core/src/index.ts 中导出 createRenderer
  2. 在 packages/vue/src/index.ts 中导出 render
  3. 创建测试实例 packages/vue/examples/runtime/render-element.html ：`
<script>
  const { h, render } = Vue

  const vnode = h(
    'div',
    {
      class: 'test'
    },
    'hello render'
  )

  console.log(vnode)

  render(vnode, document.querySelector('#app'))
</script>

成功渲染出 hello render!
image.png

文章标签：
JavaScript
Go
容器
API
关键词：
构建VUE.js
vue3 element VUE.js
element VUE.js
vue3渲染VUE.js
vue3挂载VUE.js
前端要努力QAQ
目录
相关文章
龙大吉
|
24天前
|
JavaScript 前端开发 持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
龙大吉
22 4
G0518
|
1月前
|
存储 JavaScript 前端开发
深入探索 Vue.js：构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js：构建现代 Web 应用的利器
G0518
21 1
chnjames
|
1月前
|
JavaScript 前端开发 UED
Vue 组件设计：构建生动多彩的树形结构组件
本文介绍了如何使用 Vue 构建一个功能强大的树形结构组件。该组件支持递归渲染节点及其子节点，提供了自定义节点颜色、文本和布局的功能。通过独特的样式处理不同层级的节点，展示出丰富的视觉效果。组件还支持动态布局和缩放，确保灵活的界面展示和用户体验。文章提供了详细的代码实现，包括 HTML、JavaScript 和 SCSS，帮助开发者快速集成和定制自己的树形结构组件。
chnjames
133 0
Vue 组件设计：构建生动多彩的树形结构组件
有路有乔-六月
|
1月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
有路有乔-六月
24 2
有路有乔-六月
|
1月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
有路有乔-六月
18 1
G0518
|
1月前
|
监控 JavaScript 前端开发
深入了解Vue.js：构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js：构建现代前端应用的利器
G0518
15 0
diygwcom
|
1月前
|
资源调度 JavaScript PHP
Vue3+ element plus 前后分离admin项目安装教程
Vue3+ element plus 前后分离admin项目安装教程
diygwcom
43 0
我是快乐的嘟嘟
|
9天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
87 26
html的七十二变
|
9天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
31 8
html的七十二变
|
9天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
26 7

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 4
    自制简单的range（Vue）
  • 5
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 6
    vite原理之解析.vue文件
  • 7
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 8
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 9
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 10
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 1
    vue代码优化方案
    57
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    140
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    220
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1162
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    489
  • 8
    【vue】 vue2 监听滚动条滚动事件
    146
  • 9
    【天地图】vue 天地图 T is not defined
    182
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    643

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Node.js 入门教程文档
  • Node.js 入门与实战
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问