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

vue3 源码学习，实现一个 mini-vue（八）：构建 renderer 渲染器之 ELEMENT 节点的更新与删除

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

highlight: vs2015

前言

原文来自 我的个人博客

再上一章中，我们完成了 renderer 的基础架构，完成了 ELEMENT 节点的挂载并且导出了可用的 render 函数。

我们知道对于 render 而言，除了有 挂载 操作之外，还存在 更新和删除 的操作。

那么在本章就让我们一起来实现一下它们吧。

1. 新旧元素相同时 ELEMENT 节点的更新操作

所谓更新操作指的是：生成一个新的虚拟 DOM 树，运行时渲染器遍历这棵新树，将它与旧树进行比较，然后将必要的更新应用到真实 DOM 上去。

我们来看下面的代码：

<script>
  const { h, render } = Vue

  const vnode = h(
    'div',
    {
      class: 'test'
    },
    'hello render'
  )
  // 挂载
  render(vnode, document.querySelector('#app'))

  // 延迟两秒，生成新的 vnode，进行更新操作
  setTimeout(() => {
    const vnode2 = h(
      'div',
      {
        class: 'active'
      },
      'update'
    )
    render(vnode2, document.querySelector('#app'))
  }, 2000)
</script>

以上代码执行了两遍 render 操作，第一遍是挂载操作，第二遍是更新操作。

1.1 源码阅读

我们知道每次的 render 渲染 ELEMENT，其实都会触发 processElement，所以我们可以直接在 processElement 中增加断点，进入 debugger：

  1. 第一次触发 processElement 为 挂载 操作，可以直接 跳过
  2. 第二次触发 processElement 为 更新操作，我们直接进入 processElement：

image.png

此时的 n1（旧值）和 n2（新值）分别为：

image.png

  1. 我们进入 patchElement 执行更新操作：

image.png

  1. 执行 const el = (n2.el = n1.el!)。使 新旧 vnode 指向 同一个 el 元素。继续执行 patchElement：

image.png

  1. 接着会执行 patchChildren(...) 方法，表示 为子节点打补丁。我们进入 patchChildren 方法：

image.png

  1. patchChildren 方法首先会对 c1、c2 进行赋值，此时 c1 为 旧节点的 children，c2 为 新节点的 children。我们继续执行 patchChildren，跳过没用的 if，来到第 1648 行：

image.png

  1. 由上图可知会触发了 hostSetElementText。我们知道 hostSetElementText 其实是一个 设置 text 的方法。那么此时 patchChildren 执行完成。 text 内容更新完成，浏览器展示的 text 会发生变化。返回 patchElement 继续执行：

image.png

  1. 程序会执行 patchProps(....) 方法，表示 为 props 打补丁，我们进入 patchProps

image.png

  1. 查看代码可以发现代码执行了两次 for 循环操作：

    1. 第一次循环执行 for in newProps，执行 hostPatchProp 方法设置新的 props
    2. 第二次循环执行 for in oldProps，执行 hostPatchProp，配合 !(key in newProps) 判断，删除 没有被指定的旧属性 ，比如：
// 原属性：
{
  class: 'test',
  id: 'test-id'
}
// 新属性：
{
  class: 'active'
}

则 删除 id

  1. 至此 props 更新完成
  2. 至此，更替更新完成

总结：

由以上代码可知：

  1. 无论是 挂载 还是 更新 都会触发 processElement 方法，状态根据 oldValue 进行判定
  2. Element 的更新操作有可能 会在同一个 el 中完成。（注意： 仅限元素没有发生变化时，如果新旧元素不同，那么是另外的情况。）

  3. 更新操作分为：

    1. children 更新
    2. props 更新

1.2 代码实现

根据以上逻辑，我们可以直接为 processElement 方法，新增对应的 else 逻辑：

  1. 在 packages/runtime-core/src/renderer.ts 中，为 processElement 增加新的判断：
/**
 * Element 的打补丁操作
 */
const processElement = (oldVNode, newVNode, container, anchor) => {
  if (oldVNode == null) {
    // 挂载操作
    mountElement(newVNode, container, anchor)
  } else {
    // 更新操作
    patchElement(oldVNode, newVNode)
  }
}
  1. 创建 patchElement 方法：
/**
 * element 的更新操作
 */
const patchElement = (oldVNode, newVNode) => {
  // 获取指定的 el
  const el = (newVNode.el = oldVNode.el!)

  // 新旧 props
  const oldProps = oldVNode.props || EMPTY_OBJ
  const newProps = newVNode.props || EMPTY_OBJ

  // 更新子节点
  patchChildren(oldVNode, newVNode, el, null)

  // 更新 props
  patchProps(el, newVNode, oldProps, newProps)
}
  1. 创建 patchChildren 方法：
/**
 * 为子节点打补丁
 */
const patchChildren = (oldVNode, newVNode, container, anchor) => {
  // 旧节点的 children
  const c1 = oldVNode && oldVNode.children
  // 旧节点的 prevShapeFlag
  const prevShapeFlag = oldVNode ? oldVNode.shapeFlag : 0
  // 新节点的 children
  const c2 = newVNode.children

  // 新节点的 shapeFlag
  const { shapeFlag } = newVNode

  // 新子节点为 TEXT_CHILDREN
  if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
    // 旧子节点为 ARRAY_CHILDREN
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      // TODO: 卸载旧子节点
    }
    // 新旧子节点不同
    if (c2 !== c1) {
      // 挂载新子节点的文本
      hostSetElementText(container, c2 as string)
    }
  } else {
    // 旧子节点为 ARRAY_CHILDREN
    if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
      // 新子节点也为 ARRAY_CHILDREN
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        // TODO: 这里要进行 diff 运算
      }
      // 新子节点不为 ARRAY_CHILDREN，则直接卸载旧子节点
      else {
        // TODO: 卸载
      }
    } else {
      // 旧子节点为 TEXT_CHILDREN
      if (prevShapeFlag & ShapeFlags.TEXT_CHILDREN) {
        // 删除旧的文本
        hostSetElementText(container, '')
      }
      // 新子节点为 ARRAY_CHILDREN
      if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
        // TODO: 单独挂载新子节点操作
      }
    }
  }
}
  1. 创建 patchProps 方法：
/**
 * 为 props 打补丁
 */
const patchProps = (el: Element, vnode, oldProps, newProps) => {
  // 新旧 props 不相同时才进行处理
  if (oldProps !== newProps) {
    // 遍历新的 props，依次触发 hostPatchProp ，赋值新属性
    for (const key in newProps) {
      const next = newProps[key]
      const prev = oldProps[key]
      if (next !== prev) {
        hostPatchProp(el, key, prev, next)
      }
    }
    // 存在旧的 props 时
    if (oldProps !== EMPTY_OBJ) {
      // 遍历旧的 props，依次触发 hostPatchProp ，删除不存在于新props 中的旧属性
      for (const key in oldProps) {
        if (!(key in newProps)) {
          hostPatchProp(el, key, oldProps[key], null)
        }
      }
    }
  }
}

至此，更新操作完成。

创建新的测试实例 packages/vue/examples/runtime/render-element-update.html：

<script>
  const { h, render } = Vue

  const vnode = h(
    'div',
    {
      class: 'test'
    },
    'hello render'
  )
  // 挂载
  render(vnode, document.querySelector('#app'))

  // 延迟两秒，生成新的 vnode，进行更新操作
  setTimeout(() => {
    const vnode2 = h(
      'div',
      {
        class: 'active'
      },
      'update'
    )
    render(vnode2, document.querySelector('#app'))
  }, 2000)
</script>

测试更新成功。

2. 新旧节点不同元素时，ELEMENT 节点的更新操作

上一小节中，完成了 Element 的更新操作，但是我们之前的更新操作是针对 相同 元素的，在 不同 元素下，ELEMENT 的更新操作会产生什么样的变化呢？

2.1 源码阅读

我们从下面代码开始阅读源码：

<script>
  const { h, render } = Vue

  const vnode = h('div', {
    class: 'test'
  }, 'hello render')
  // 挂载
  render(vnode, document.querySelector('#app'))

  // 延迟两秒，生成新的 vnode，进行更新操作
  setTimeout(() => {
    const vnode2 = h('h1', {
      class: 'active'
    }, 'update')
    render(vnode2, document.querySelector('#app'))
  }, 2000);
</script>
  1. 等待第二次进入 render:

  1. vnode 存在，执行 patch 方法：

image.png

  1. 可以看到这里直接执行了 unmount 卸载方法，我们进入 unmount：
  2. 在 unmount 方法中，虽然代码很多，但是大多数代码都没有执行。最终会执行到 remove(vnode) ，表示删除 vnode：

image.png

  1. 进入 remove 方法，同样大多数代码没有执行，直接到 performRemove()，执行 hostRemove(el!)，进入 hostRemove，触发的是 nodeOps 中的 remove 方法，代码为 parent.removeChild(child):

image.png

  1. 至此 el 被删除
  2. 然后将 n1 = null

image.png

  1. 此时，进入 switch，触发 processElement

image.png

  1. 因为 n1 === null，所以会触发 mountElement 挂载新节点 操作

image.png

总结：
由以上代码可知：

  1. 当节点元素不同时，更新操作执行的其实是：先删除、后挂载 的逻辑
  2. 删除元素的代码从 unmount 开始，虽然逻辑很多，但是最终其实是触发了 nodeOps 下的 remove 方法，通过 parent.removeChild(child)` 完成的删除操作。

2.2 代码实现

  1. 在 packages/runtime-core/src/renderer.ts 的 patch 方法中增加 type 判断：
/**
 * 判断是否为相同类型节点
 */
if (oldVNode && !isSameVNodeType(oldVNode, newVNode)) {
  unmount(oldVNode)
  oldVNode = null
}
  1. 在 packages/runtime-core/src/vnode.ts 中，创建 isSameVNodeType 方法：
/**
 * VNode
 */
export interface VNode {
  key: any
  ...
}

/**
 * 根据 key || type 判断是否为相同类型节点
 */
export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}
  1. 在 packages/runtime-core/src/renderer.ts 实现 unmount 方法：
export interface RendererOptions {
  /**
   * 卸载指定dom
   */
  remove(el): void
}

/**
 * 解构 options，获取所有的兼容性方法
 */
const { ...remove } = options

const unmount = vnode => {
  hostRemove(vnode.el!)
}
  1. 在 packages/runtime-dom/src/nodeOps.ts 中，实现 remove 方法：
/**
 * 删除指定元素
 */
remove: child => {
  const parent = child.parentNode
  if (parent) {
    parent.removeChild(child)
  }
}

此时代码完成。

创建对应测试实例 packages/vue/examples/runtime/render-element-update-2.html：

<script>
  const { h, render } = Vue

  const vnode = h(
    'div',
    {
      class: 'test'
    },
    'hello render'
  )
  // 挂载
  render(vnode, document.querySelector('#app'))

  // 延迟两秒，生成新的 vnode，进行更新操作
  setTimeout(() => {
    const vnode2 = h(
      'h1',
      {
        class: 'active'
      },
      'update'
    )
    render(vnode2, document.querySelector('#app'))
  }, 2000)
</script>

测试成功

3. 删除元素，ELEMENT 节点的卸载操作

此时我们已经有了 unmount 函数，我们知道触发 unmount 函数，即可卸载元素。

那么接下来我们就可以基于这样的函数来去实现 卸载 操作了。

这块代码比较简单，我们直接实现即可：

  1. 在 packages/runtime-core/src/renderer.ts 中为 render 函数补充卸载逻辑：
const render = (vnode, container) => {
  if (vnode == null) {
    // TODO: 卸载
    if (container._vnode) {
      unmount(container._vnode)
    }
  } else {
    // 打补丁（包括了挂载和更新）
    patch(container._vnode || null, vnode, container)
  }
  container._vnode = vnode
}
  1. 创建如下测试实例 packages/vue/examples/imooc/runtime/render-element-remove.html：
<script>
  const { h, render } = Vue

  const vnode = h(
    'div',
    {
      class: 'test'
    },
    'hello render'
  )
  // 挂载
  render(vnode, document.querySelector('#app'))

  // 延迟两秒，执行卸载操作
  setTimeout(() => {
    render(null, document.querySelector('#app'))
  }, 2000)
</script>

测试实例，卸载成功。

文章标签：
JavaScript
关键词：
节点VUE.js
vue3节点VUE.js
渲染VUE.js
源码学习VUE.js
构建VUE.js
前端要努力QAQ
目录
相关文章
梦中千秋
|
20天前
|
JavaScript 前端开发 索引
Vue嵌套循环渲染与条件渲染--v-for|v-if
Vue嵌套循环渲染与条件渲染--v-for|v-if
梦中千秋
20 0
宁波阿成.
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable增加开始节点的表单绑定修改
ruoyi-nbcio-plus基于vue3的flowable增加开始节点的表单绑定修改
宁波阿成.
5 0
嘘~！
|
6天前
|
JavaScript 前端开发 API
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
vue改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
嘘~！
14 2
小周sir
|
20天前
|
设计模式 JavaScript 前端开发
Vue源码学习需要哪些工具和技能
【4月更文挑战第20天】学习Vue源码需具备的工具与技能：VS Code或WebStorm作为代码编辑器，Node.js与npm管理依赖，Git操作仓库。基础包括JavaScript、ES6+语法、前端知识（HTML/CSS/浏览器原理）及Vue基础知识。进阶则需源码阅读理解能力，调试技巧，熟悉设计模式和架构思想。学习方法强调系统学习、实践与持续关注Vue最新动态。
小周sir
19 8
小周sir
|
20天前
|
JavaScript 前端开发 编译器
Vue 源码学习路线
【4月更文挑战第20天】探索Vue源码涉及响应式系统、虚拟DOM、模板编译等核心概念。先掌握Vue基础知识、JavaScript（ES6+）和前端工程化。从源码入口文件开始，研究响应式、虚拟DOM、模板编译、实例方法、全局API及生命周期。理解编译器和渲染器工作原理，实践编写Vue插件，参与开源项目，阅读相关文章教程，持续关注Vue最新动态。这是一个循序渐进、需要耐心和实践的过程。
小周sir
9 1
桃李春风一杯酒
|
20天前
|
JavaScript 前端开发 内存技术
Vue入门：构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程：安装 Node.js 和 npm，使用 Vue CLI (`npm install -g @vue/cli`) 创建项目，选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件，显示数据属性。在 `App.vue` 中引入并注册组件，启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅！
桃李春风一杯酒
13 2
龙大吉
|
24天前
|
JavaScript 前端开发 UED
Vue工具和生态系统： Vue.js和服务器端渲染（SSR）有关系吗？请解释。
Vue.js是一个渐进式JavaScript框架，常用于开发单页面应用，但其首屏加载较慢影响用户体验和SEO。为解决此问题，Vue.js支持服务器端渲染（SSR），在服务器预生成HTML，加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架，整合核心库并提供额外功能，帮助构建高效的应用，改善用户体验。
龙大吉
20 0
微芒不朽
|
26天前
|
JavaScript
Vue-实现点击空白处隐藏某节点
Vue-实现点击空白处隐藏某节点
微芒不朽
17 1
fruge365
|
1月前
|
JavaScript 前端开发
【vue】设计组织机构树,增删改查,右键导航树弹出菜单对点前节点增删改,特殊字符校验
【vue】设计组织机构树,增删改查,右键导航树弹出菜单对点前节点增删改,特殊字符校验
fruge365
24 1
刻刻帝的海角
|
1月前
|
JavaScript 前端开发
vue 条件渲染
vue 条件渲染
刻刻帝的海角
14 0

热门文章

最新文章

  • 1
    vue项目开发笔记记录（一）
  • 2
    vue项目开发笔记记录（二）
  • 3
    vue项目实战：实战技巧总结（中）
  • 4
    vue项目开发笔记记录（四）
  • 5
    vue element plus Input 输入框
  • 6
    vue核心语法2
  • 7
    vue element plus Descriptions 描述列表
  • 8
    【vue报错】error:0308010C:digital envelope routines::unsupported
  • 9
    vue element plus 快速开始
  • 10
    Vue3 子/父组件相互调用
  • 1
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
    78
  • 2
    Vue中el与data的两种写法
    19
  • 3
    Vue之数据绑定
    14
  • 4
    使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
    44
  • 5
    初识Vue 输出Hello World 及注意事项
    22
  • 6
    vue.js项目评估流程图特效
    87
  • 7
    如何在vue项目中优雅地使用SVG
    82
  • 8
    在Vue项目中，什么情况下需要使用错误处理机制？
    20
  • 9
    如何在Vue中使用第三方库？
    36
  • 10
    如何在 Vue 中进行国际化和多语言支持？
    42

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 使用函数计算FC部署TodoList应用
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）