Vue3源码解读之patch

最新推荐文章于 2024-04-16 00:10:35 发布
最新推荐文章于 2024-04-16 00:10:35 发布
阅读量152 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyzzabc123/article/details/127085866
版权
本文深入讲解Vue3的patch过程，涉及componentEffect、processFragment、patchBlockChildren等关键函数。通过一个例子展示数据变更如何影响DOM更新，详细解析patch流程，包括处理Fragment、Element和Keyed Children的情况。
摘要由CSDN通过智能技术生成

例子代码

本篇将要讲解dom diff，那么咱们结合下面的例子来进行讲解，这个例子是在上一篇文章的基础上，加了一个数据变更，也就是list的值发生了改变。html中增加了一个按钮change，通过点击change按钮来调用change函数，来改变list的值。例子位于源代码/packages/vue/examples/classic/目录下，下面是例子的代码：

const app = Vue.createApp({
   
    data() {
   
        return {
   
            list: ['a', 'b', 'c', 'd']
        }
    },
    methods: {
   
        change() {
   
            this.list = ['a', 'd', 'e', 'b']
        }
    }
});
app.mount('#demo')


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=medium-dpi,viewport-fit=cover"
    />
    <title>Vue3.js hello example</title>

    <script src="../../dist/vue.global.js"></script>
</head>
<body>
<div id="demo">
    <ul>
        <li v-for="item in list" :key="item">
            {
  {item}}
        </li>
    </ul>
    <button @click="change">change</button>
</div>
<script src="./hello.js"></script>
</body>
</html>
Vue3源码视频讲解：进入学习

源码解读

关于Vue3中数据发生变更，最终影响到页面发生变化的过程，我们本篇文章只对componentEffect以及以后的代码进行讲解，对于数据变更后，是如何执行到componentEffect函数，以及为何会执行componentEffect，后面的文章再进行讲解。

componentEffect

来看下componentEffect更新部分的代码：

  // @file packages/runtime-core/src/renderer.ts
  function componentEffect() {
   
    if (!instance.isMounted) {
   
        // first render
    } else {
   
        let {
   next, bu, u, parent, vnode} = instance
        let originNext = next
        let vnodeHook: VNodeHook | null | undefined

        if (next) {
   
            updateComponentPreRender(instance, next, optimized)
        } else {
   
            next = vnode
        }
        next.el = vnode.el

        // beforeUpdate hook
        if (bu) {
   
            invokeArrayFns(bu)
        }
        // onVnodeBeforeUpdate
        if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
   
            invokeVNodeHook(vnodeHook, parent, next, vnode)
        }
        const nextTree = renderComponentRoot(instance)
        const prevTree = instance.subTree
        instance.subTree = nextTree

        if (instance.refs !== EMPTY_OBJ) {
   
            instance.refs = {
   }
        }
        patch(
            prevTree,
            nextTree,
            hostParentNode(prevTree.el!)!,
            getNextHostNode(prevTree),
            instance,
            parentSuspense,
            isSVG
        )
        next.el
最低0.47元/天 解锁文章
yyzzabc123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3源码阅读(十一)patch
一一
08-13 322
Patch Vue 在通过 VNode 节点渲染 DOM 时,并不是通过当前的 VNode 节点去暴力的更新 DOM 节点,而是对新旧两个 VNode 节点通过 patch 算法进行比较,然后通过对比结果找出差异的属性或节点进行按需更细。显而易见,patch 能够减少不必要的开销,提升性能。 过程: 创建需要新增的节点 移除已经废弃的节点 移动或修改需要更新的节点 patchFlag的优化：细化元素类型标记,拆出元素中静态属性和可变属性等,不对不会再变化的静态属性进行元素的全量比较 // 渲染过程
vue3从精通到入门3：patch函数源码实现方式
qq_40358970的博客
03-26 1360
注释节点在虚拟 DOM 中主要用于标记某些特殊的位置或状态，但它们并不直接映射到真实的 DOM 注释节点。在 Vue 3 中，注释节点主要用于内部优化和特定功能的实现，例如用于标记 v-if 指令的条件分支或插槽的边界。函数的主要任务是确保组件实例在更新过程中保持正确的状态，并处理组件的挂载、更新或卸载。函数的主要任务是确保元素节点在更新过程中保持正确的状态，并更新其属性、子节点等。函数的解析，注意，实际的源码可能更复杂并包含更多的优化和边界情况处理。函数的主要任务是将静态节点挂载到实际的 DOM 中。
揭秘，Vue3 compile 和 runtime 结合的 patch 过程（源码分析）
五柳
09-24 1000
前言 在上一篇文章中，我们分析了在编译过程静态节点的提升。并且，在文章的结尾也说了，下一篇文章将会介绍 patch 过程。 说起「Vue3」的 patch 过程，其中最为津津乐道的就是靶向更新。靶向更新，顾名思义，即更新的过程是带有目标性的、直接性的。而，这也是和静态节点提升一样，是「Vue3」针对 VNode 更新性能问题的一大优化。 那么，今天，我们就来揭秘「Vue3」compile 和 runtime 结合的 patch过程 究竟是如何实现的！ 什么是 shapeFlag 说起「Vue3」的 patc
vue3 源码解析（5）— patch 函数源码的实现
old brother stable
02-01 1438
在 vue 中 patch 函数的作用是在渲染的过程中，比较新旧节点的变化，通过打补丁的形式，进行新增、删除、移动或替换操作，此过程避免了大量的 dom 操作，提升了运行的性能。
Vue3源码解读之runtime（上）
weixin_43577787的博客
02-20 877
Vue3源码解读之runtime（上） 前言 上一篇文章，我们提到packages中核心的源码主要分为三部分，接下来我们就开始阅读runtime部分的代码 createApp(App).mount('#app') 接下来我们就以入口文件中的这行代码开始来一步步深入 初始化 上一篇文章中我们提到vue主入口文件中，引入导出了runtime-dom和compiler，而createApp就是来自runtime-dom // packages/runtime-dom/src/index.ts export c
Vue3源码解读之全局概览
weixin_43577787的博客
02-20 166
Vue3源码解读之全局概览 目录结构 当我们开始阅读源码之前，我们先来看一眼整体的目录结构 ├── packages // 源码 ├── scripts // 脚本文件，用于存放配置文件，进行编译打包 ├── test-dts // 测试文件 ├── .prettierrc ├── api-extractor.json // TypeScript的API提取和分析工具 ├── CHANGELOG.md ├── jest.config.js // jest配置文件 ├── package.json ├──
vue3中patch函数（处理vnode）位运算，以及创建vnode的时做了什么
m0_53273062的博客
07-04 797
patch函数用来挂载和更新节点，当节点发生改变，对比旧节点与新节点的不同，采用不同的更新方式。patch通过对vnode的type进行判断当前是什么类型节点。//根据新节点的 type 类型，调用不同的处理方法；这里大部分方法名都是以 process 开头，意为加工、处理对应元素// 文本节点case Text:break// 注释节点break// 静态节点break// 多根节点n1,n2,container,anchor,isSVG,optimizedbreak。
vue的源码学习之六——3.patch
路在脚下，幸福在手中，莫贪！！！！！
12-13 317
1. 介绍        版本：2.5.17。         我们使用vue-vli创建基于Runtime+Compiler的vue脚手架。        学习文档：https://ustbhuangyi.github.io/vue-analysis/components/patch.html  2.patch 通过上一节的分析我们知道，当我们通过 createComponent 创建...
Vue3设计思路 -- 虚拟DOM以及patch算法
weixin_46240162的博客
07-16 740
function reactive(obj) { const proxy = new Proxy(obj, { get(target, key) { /* render函数第一次渲染的时候会获取引用的值 所以第一次渲染就会走到这个 get 方便我们开始做依赖收集 / track(target, key) return target[key] }, set(target, key, value) { target[key] = value console.log(‘proxy’, key) / 修改的时候，去
Vue3源码学习之旅(1)--自己实现一个简单的渲染系统-render/h/patch函数
听雨少年的博客
08-25 501
文章目录Vue3源码学习真实的DOM渲染虚拟DOM的优势虚拟DOM的渲染过程三大核心系统三大系统协同工作实现Mini-Vue渲染系统实现h函数 – 生成VNodeMount函数 – 挂载VNodePatch函数 – 对比两个VNode测试效果 Vue3源码学习 真实的DOM渲染 我们传统的前端开发中，我们是编写自己的HTML，最终被渲染到浏览器上的，那么它是什么样的过程呢？ 虚拟DOM的优势 目前框架都会引入虚拟DOM来对真实的DOM进行抽象，这样做有很多的好处： 首先是可以对真实的元素节点进行抽象，抽象
Vue3设计思路 -- 虚拟DOM以及patch算法，2024年最新高级程序员面试题
最新发布
2301_79099373的博客
04-16 899
title:[effect,effect] // effect 对应的就是一个个的更新函数，每个响应式对象的值都是存着更新函数的数组，当这个值变化的时候遍历执行数组里面的一个个effect函数。// 这一步极其重要，在虚拟dom上存一下dom，方法最后比对完成之后转换成真实dom操作，触发更新页面，所以说虚拟dom也是要做真实dom操作的，修改的时候，去依赖收集的数据结构中 找到对应的key 把 key 对应的 更新函数都执行一遍，这就触发了页面的响应式。// render 函数的结果是一个 vnode。
vue3学习（十五）--- Pinia状态管理器
邱先生的博客
10-30 432
Pinia官网地址点这里Pinia.js 有如下特点： 这样就引入成功了，状态管理器使用要单独配置文件。然后在用到的页面中引入 ，注意：引入和使用是分开的 使用defineStore定义仓库，传唯一id。变量名称命名为use…是可组合项之间的约定，以使其使用习惯。 唯一的id。类似于的模块的功能，这样更加的方便。 State 箭头函数 返回一个对象 在对象里面定义值 getters类似计算属性 actions里面可以定义同步和异步 页面使用 引入对应的名称，然后执行。 state 1. 直接修
vue3.0源码解析，patch&diff过程
柯闪电，一位前端小白的博客。
05-14 1104
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
学习vue3，安装vue3环境，解决command volar.action.splitEditors，熟悉vue3的diff算法和虚拟DOM
weixin_39838846的博客
07-15 1879
学习vue3，安装vue3环境，解决command volar.action.splitEditors，熟悉vue3的diff算法和虚拟DOM
cmake编译opencv3.2.0_聊聊 Vue.js 3.0 的模板编译优化
weixin_42511151的博客
01-11 238
Hello，各位小伙伴，接下来的一段时间里，我会把我的课程《Vue.js 3.0 核心源码解析》中问题的答案陆续在我的公众号发布，由于课程的问题大多数都是开放性的问题，所以我的答案也不一定是标准的，仅供你参考喔。本期的问题：Block数组是一维的，但是动态的子节点可能有嵌套关系，patchBlockChildren内部也是递归执行了patch函数，那么在整个更新的过程中，会出现子...
Vue3 源码阅读（10）：组件化 —— 实现原理
f18855666661的博客
08-24 1958
组件是对页面中内容的一种模块化封装，这篇博客讲解 Vue 中组件化的实现方式。
深入解析Vue虚拟DOM的patch源码
"Vue.js 虚拟DOM的patch源码分析" 在前端开发中，Vue.js 使用虚拟DOM（Virtual DOM）来提高应用性能。虚拟DOM是JavaScript对象的表示，它模拟了真实的DOM结构，允许我们在内存中进行计算和比较，然后最小化对实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值