Vue源码分析-update

最新推荐文章于 2024-10-27 13:51:37 发布
原创 最新推荐文章于 2024-10-27 13:51:37 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨Vue.js的_update方法，该方法在首次渲染和数据变更时被调用，负责将vnode映射为虚拟DOM并驱动视图更新。Vue.js能运行在浏览器和服务器环境，通过createPatchFunction利用函数柯里化处理跨平台差异。patch方法中的关键步骤包括：转换真实DOM为vnode、创建和挂载子节点，以及调用insert方法插入节点。整个过程涉及多个模块的钩子函数和DOM操作，确保视图与数据的同步。


_update方法挂载在vue原型上，调用的时机有两个，一个是首次渲染的时候把我们的vnode映射成虚拟dom，另一个就是我们改变数据的时候，数据改变驱动视图的变化，同样也会调用_update
初始化渲染的时候调用vm.__patch__
在这里插入图片描述
因为vue也可以运行在服务端，是没有dom的。如果是浏览器环境就调用patch方法否则就是空函数，
在这里插入图片描述

patch方法里面调用createPatchFunction，参数nodeOps是我们一些操作dom的方法，
在这里插入图片描述
参数modules是platformModules和baseModules的concat的合集，这个里面定义了很多类的钩子函数，在patch过程中会调用不同模块的钩子函数
在这里插入图片描述
在这里插入图片描述
createPatchFunction就是在里面调用不同模块的钩子函数
在这里插入图片描述
中间还定义了很多辅助函数，最后返回了一个patch函数，所以我们调用vm._patch的时候实际上是调用的createPatchFunction中返回的patch方法，Vue为什么要绕了一大圈把patch方法定义在这里，其实用到了函数柯里化的技巧。createPatchFunction调用传入的参数是与跨平台有关的，vue可以运行的web和weex平台，调用的dom的api是不一样的，所以分离作为参数nodeOps传入，另外一个就是modules，这些模块不同的生命周期要做的事情，怎么去生成的模块和dom做配合这些也是和平台相关的，用函数柯里化的技巧把参数一次传入，就不用判断平台的差异，因为之前已经抹平了。相当于利用了闭包的技巧实现了nodeOps和modules的持有。
在这里插入图片描述patch方法中判断oldValue.nodeType是不是一个真实的dom
，因为我们不是服务端渲染，所以最后走到了oldVnode = emptyNodeAt(oldVnode),
在这里插入图片描述
emptyNodeAt把我们真实的dom转成一个vnode，
在这里插入图片描述
在这里插入图片描述

oldElm是id为app的div，那么parentElm就是body，接下来createElm是一个很重要的函数，它的在作用就是把vnode挂载到真实的dom上
在这里插入图片描述
折叠起来的判断走不到，后面判断tag是不是未知的元素，如果是就报警告 Unknown custom element:<xxx> did you ...
在这里插入图片描述
在这里插入图片描述
vnode的elemenet如果有命名空间就调用命名空间的创建createElementNS方法，否则直接调用createElement创建，
在这里插入图片描述
平台的判断可以不用看，如果你的vnode的children还是vnode接下来创建子节点
在这里插入图片描述
createChildren
遍历vnode，判断children是不是array类型，递归调用createEle，然后把当前节点作为父节点插入，如果就是普通的文本节点，nodeOps直接调用appendChild添加进来。
在这里插入图片描述
最终调用insert方法插入节点
在这里插入图片描述
insert辅助方法，判断参考节点ref的父节点和parent是不是下相等，从而调用insertBefore 和 appendChild方法
在这里插入图片描述
在这里插入图片描述
如果这里定义了parentElm，那就要把之前的节点移除掉，最终调用invokeInsertHook钩子函数

Vue源码解析之_update函数（六）
yayayayaya_的博客
07-06 7741
在$mount函数中，主要是调用了mountComponent函数，而该函数最后主要是调用了updateComponent函数，上一次我们分析了render函数的功能（主要是利用createElement函数生成vnode），那么_update函数主要做了什么首先，可以看到在'src/core/instance/lifecycle.js'中在Vue原型上定义了私有方法_update，在整个函数中，...
Vue2源码梳理：update的整体实现流程
Wang的专栏
02-16 2111
回到之间 $mount时，mountComponent 函数的过程，vm._render 是如何创建了一个 VNode，接下来就是要把这个 VNode 渲染成一个真实的 DOM 并渲染出来，这个过程是通过 vm._update 完成的，_update 它是一个vue 的私有方法，它把我们的 vnode 渲染成真实的 dom，_update的方法，也是原型上的一个方法, 它的定义在src/core/instance/lifecycle.js 中
Vue自定义指令
Siobhan_Mxin的博客
09-07 2826
自定义指令v-focus光标聚焦、v-color指定文本颜色、v- fontSize指定字体大小
Vue 2.0源码分析-update
分享前端工程化、动效魔法与性能之舞！
12-09 1423
那么至此我们从主线上把模板和数据如何渲染成最终的 DOM 的过程分析完毕了，我们可以通过下图更直观地看到从初始化 Vue 到最终渲染的整个过程。我们这里只是分析了最简单和最基础的场景，在实际项目中，我们是把页面拆成很多组件的，Vue 另一个核心思想就是组件化。那么下一章我们就来分析 Vue 的组件化过程。
vue源码分析（八）—— update分析(首次渲染)
weixin_44784401的博客
11-16 492
vue源码分析（八）—— update分析(首次渲染)
vue-the-source:vue.js源码分析-js
03-24
在这个源码分析中，我们将探讨Vue.js 1.0.26版本中的两个关键特性：`v-for`指令的实现原理和组件系统的详细解析。 首先，我们来看`v-for`指令。在Vue中，`v-for`用于遍历数组或对象，动态渲染列表。其内部实现基于...
vue2源码分析-vue入口文件global-api分析
qq_42389674的博客
03-06 807
vue 全局api初始化 vue挂载的全局属性: vue.util 公共方法,set 方法 ,del方法, nextTick方法,observable observe方法,options vue的一些选项。初始化方法: extend,extend函数此处用于扩展,initUse 初始化插件,initMixin 初始化混入,initExtend,构造一个vue的子类 ,initAssetRegisters(Vue) 注册或者获取全局组件、指令、过滤器
vue源码分析-v-model的本质
yyzzabc123的博客
10-18 442
由于和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对的分析方式和以往大同小异。分析会围绕模板的编译，函数的生成，到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论，v-model无论什么使用场景，本质上都是一个语法糖。和表单脱离不了关系，之所以视图能影响数据，本质上这个视图需要可交互的，因此表单是实现这一交互的前提。表单的使用以为核心，更细的划分结合的使用如下： 接下来的分析，我们以普通输入框为例 进入正文前先回顾一下模板到真实节点的过程。接下来，我们先看看模板解析为树的过程。模板的编译
Vue源码分析--vm.$forceUpdate()
Lawliet_Hero的博客
01-04 1065
Vue源码分析--vm.$forceUpdate1. vm._watcher是啥？是怎么来的？2. vm._watcher.update() 又是啥方法？ 首先直接上源码，这里有两个关注点 Vue.prototype.$forceUpdate = function () { const vm: Component = this // 1. vm._watcher是啥？是怎么来的？ if (vm._watcher) { // 2. vm._watcher.update() 又是啥方
vue源码分析-组件
yyzzabc123的博客
11-04 398
我们知道，组件是Vue体系的核心，熟练使用组件是掌握Vue进行开发的基础。上一节中，我们深入了解了Vue组件注册到使用渲染的完整流程。这一节我们会在上一节的基础上介绍组件的两个高级用法：异步组件和函数式组件。
在Vue 3中，`@update:model-value`
m0_57537410的博客
01-25 4660
在子组件中，可以使用`$emit`方法触发一个自定义事件来更新父组件中的数据。在子组件中，我们使用`:value`绑定`modelValue`，并在`@input`事件中使用`$emit`方法触发`update:model-value`事件，并传递新的值。这样，当子组件中的输入框的值发生变化时，父组件中的`value`变量也会相应地更新。在Vue 3中，`@update:model-value`是一个自定义事件修饰符，用于在子组件中更新父组件中的`v-model`绑定的值。
Vue.js中update:事件的深度解析与最佳实践
软考鸭
10-27 1273
软考鸭微信小程序 过软考,来软考鸭!提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务在Vue.js中，事件是一种特殊的自定义事件，主要用于实现父子组件之间的双向数据绑定。这种事件机制在Vue 2和Vue 3中都有应用，但具体实现方式和推荐用法可能有所不同。本文将深入探讨事件的工作原理、使用场景以及最佳实践。
Vue源码系列10------VueDOM的首次渲染---update
编程小渣渣的进阶之路
05-15 745
Vue 的_update是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；这篇文章中涉及的是 首次渲染的时候发生的变化。_update方法的作用是把 VNode 渲染成真实的 DOM，它的定义在src/core/instance/lifecycle.js中： Vue.prototype._update = function (vnode: VNode...
Vue事件处理指南– Vue3更新
粉丝们务必加入微信粉丝群
06-02 742
作者：Fernando Doglio 译者：前端小智 来源：medium 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。 Vue事件处理是每个Vue项目的必要方面。 它用于捕获用户输入，共享数据以及许多其他创造性方式。 在本文中，会介绍基础知识，并提供一些用于处理事件的代码示例。 它仅包含我认为最有用的技巧/方法，要深入.
关于Vue的Update、nextTick 、refs ，虚拟DOM与真实DOM的联系
weixin_51116314的博客
08-20 2772
虚拟DOM和真实DOM 相信大家都知道虚拟DOM和真实DOM的区别吧，简而言之就是虚拟DOM是一个人工创造的JS的对象，而真实DOM是document原生对象。我只言片语说不清，大家各自百度一下吧。 虚拟DOM的渲染和真实DOM的渲染不是在同一周期中，当然真实DOM渲染之前还有很多步骤不在实际考虑范围之内，我们只需要单独抽象出虚拟DOM和真实DOM的渲染步骤进行比较。 好就算你没看懂，那么也没关系，我将用几个实际例子和图文为你讲解。 Vue-Update 首先我们先了解一下事件循环和DOM渲染的关系，如果不
vue中的细节（长期更新）
KnifeBlade的博客
09-12 278
（一）条件渲染：v-if 与 v-show： &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;两者均用于条件渲染，都可以与”v-else”搭配使用。区别在于使用” v-if “时，如果条件不满足，被” v-if “包裹的元素不会进行初始化，即DOM结构中没有插入该标签包裹的部分；而使用
新建 vue项目时报错，无法成功搭建项目
weixin_30735391的博客
10-28 2062
之前电脑已经安装 Node环境和 vue-cli脚手架，但是过段时间没有使用，然后现在用 vue-cli 搭建项目的时候，启动服务器的时候报错，无法启动成功，摸索半天，发现是因为 Node和vue-cli 的版本过低，都需要更新，更新过后成功启动...... 以下是 Node 和 vue-cli 更新的总结： 一. vue-cli更新 　　在百度了好久，也试了好多方法，没用，最后使...
vue 【详解】父子组件传值、父子组件数据双向绑定 —— : | update: |.sync | v-bind.sync | v-model(含model选项和自定义v-model)
朝阳39的博客
05-28 3267
父子组件传值 父组件向子组件传值 :（v-bind指令的简写）是父组件向子组件传值的最基本的方式。 <Child :tiltle="childTiltle" /> 子组件通过props接收父组件传入的数据 props: { tiltle: String, }, 子组件修改父组件传入的数据 1. 子组件通过 this.$emit 将新值传出 this.$emit("ChangeTiltle", "新标题"); 2. 父组件引用子组件时，绑定$emit中对应..
Vue.js源码分析（五）--update
eswang的优快云博客
05-03 374
_update 这个方法是干什么的呢，前面我们生成了vnode，下一步就是把vnode映射到真实的DOM节点上，这里包含了初次渲染和后面的更新渲染，拿首次渲染为例，整理参数之后会去调用vm.__patch__方法，接着会去判断浏览器环境或node.js上，前者转到patch函数的调用，后者返回一个空函数，因为在服务端是不存在DOM的。 让我们把目光转到patch函数上，他是createPatchF...
依赖树有什么问题vue-demo@0.1.0 C:\源码\Vue\139Vue3加载Element-plus\vue-demo ├─┬ @vue/cli-plugin-babel@5.0.8 │ └── @vue/cli-service@5.0.8 deduped ├─┬ @vue/cli-plugin-pwa@5.0.8 │ └── @vue/cli-service@5.0.8 deduped └─┬ @vue/cli-service@5.0.8 ├─┬ @vue/cli-plugin-router@5.0.8 │ └── @vue/cli-service@5.0.8 deduped └─┬ @vue/cli-plugin-vuex@5.0.8 └── @vue/cli-service@5.0.8 deduped
最新发布
03-20
| **主版本不匹配** | `@vue/cli-service@5.0.8`与`@vue/cli-plugin-babel@4.5.19`共存 | 统一升级到5.x版本：`npm update @vue/cli-plugin-babel@5` | | **子依赖冲突** | `webpack`版本被不同插件强制锁定（如PWA...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值