Vue源码分析-render的实现

Vue渲染过程详解：_renderProxy与render函数
最新推荐文章于 2025-03-29 17:18:05 发布
原创 最新推荐文章于 2025-03-29 17:18:05 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨Vue的渲染流程，重点解析_renderProxy和render函数的角色。render函数可以从$options获取，手写或编译生成，用于创建虚拟DOM。在渲染过程中，_renderProxy对象作为上下文，$createElement作为参数参与调用。浏览器支持的proxy用于对象访问劫持，确保在开发阶段的安全性。当render函数返回的不是单一VNode或存在多个根节点时，系统会发出警告。整个过程涉及组件初始化、VNode构建及错误处理等多个环节。

在这里插入图片描述
_render方法是在让render.js文件定义的，在原型上挂载了这个方法，方法中从$options上拿到render，render可以是手写，也可以是编译生成
在这里插入图片描述
之后调用render.call(vm._renderProxy, vm.$createElement);，第一个参数是执行的上下文_renderProxy对象，第二个参数$createElement
在这里插入图片描述

两个createElement的区别就是最后一个参数false和true,一个是手写render函数，另一个是编译生成的render函数。这个函数是在初始化时initRender被调用的时候执行。
在这里插入图片描述
_renderProxy的定义也是发生在init的时候，判断如果是生产环境就直接把vm赋值给_renderProxy，如果是开发阶段调用initProxy()
在这里插入图片描述
在这里插入图片描述

首先判断浏览器是否支持hasProxy，它的作用是对 对象访问做一个劫持，我们调用initProxy的时候，Chrome浏览器是支持proxy的，所以就会调用new Proxy(vm, handler)，handler参数在这里是指向hasHandler的
在这里插入图片描述
hasHandler有一个判断，如果这个target有没有这个元素，isAllowed是全局的方法或者是私有的属性方法，如果两个都不满足的情况下，就会执行warnNonPresent方法
在这里插入图片描述
这个方法就会报一个我们最熟悉的警告，Property or method xxx is not defined on the instance but ...

最后回到我们的rener方法实际上生成一个vnode，如果在生成过程中出现错误就会进行的处理，最终要拿到vnode，
在这里插入图片描述
接下来判断如果vnode不是VNode的实例，如果是array的话，说明我们模板会有多个根结点，会返回多个vnode，于是就会报一个警告Multiple root nodes returned from render function. Render function should return a single root node.

Vue源码之render函数（四）
yayayayaya_的博客
07-03 2013
在$mount函数中，最后调用的updateComponent函数，该函数中的调用了实例的私有函数vm._render，因此，现在需要弄清楚vm._render函数完成了什么功能。在'src/core/instance/render.js'中，在Vue的原型上定义了私有_render函数。1. 首先从vm.$options中拿到render函数，先暂时忽略其他部分代码，然后通过调用render函数...
Vue.js源码分析（三）--render
eswang的优快云博客
05-01 664
render 在instance的render.js里面可以找到renderMixin方法，里面定义了_render方法： const { render, _parentVnode } = vm.$options _parentVnode可以先暂时方瞎下，着重看render方法，其实就这一句： vnode = render.call(vm._renderProxy, vm.$...
HWUI源码剖析（一） - 渲染中RenderProxy视角看一种很有用的编程模式
GetnextWindow的专栏
10-15 528
实际的工程项目中，往往都是多线程编程，也就是必然有某些业务逻辑或者功能要运行在特定的线程，比如android开发中常见的IO线程，UI线程，Render线程，这样会涉及从线程A向这些工作线程通信或者函数调用的代码编程，具体实现上可以有多种多样，但是他们的核心思想其实都是一致的，Android Handler/Looper视角看UI线程的原理_nginux的博客-优快云博客。
vuejs的render渲染函数
热门推荐
z1340954953
12-16 1万+
官网文档地址:https://cn.vuejs.org/v2/guide/render-function.html 引入：         vue推荐绝大数情况下实验template创建 html，但是我们时常在vue开发需要动态的生成页面，这就是rendered函数，它比template更接近编译器          前面的博客有介绍过slot，它具备将语句中html显示对应slot的位置
Vue源码分析（Render渲染函数）
mkbird的博客
09-10 1714
使用JavaScript操作真实DOM会非常消耗资源，因为要修改真实DOM操作的内容很多，但是如果使用虚拟DOM，你无论是如何增删修改节点，都只是在操作JS，这样会很节省资源。（当然：如果你能将DOM操作到炉火纯青，保证每次对DOM的操作都是较为节约快捷的方式，那还是要比虚拟DOM快的，毕竟我们多了一步将它转换成了JS，又变回真实DOM的过程）函数会生成新的虚拟DOM，即触发我们的发布，新的虚拟DOM和旧的虚拟DOM进行比较，得出最少需要更新的节点并生成真实DOM完成一次更新。
vue2.0-源：vue源码分析-基于2.2.6版本
02-23
备注：最近为了加深印象，写了一个简单的mvvm的实现，参考了Vue中模板解析，数据监听， render函数的生成，。 该原始代码分析，会伴随大家一起学习Vue的大部分代码，而不是简单的讲一下它的原理，我会重置的多解释每...
vue源码分析-动态组件
yyzzabc123的博客
10-31 280
动态组件我相信大部分在开发的过程中都会用到，当我们需要在不同的组件之间进行状态切换时，动态组件可以很好的满足我们的需求，其中的核心是标签和属性的使用。例子是一个动态组件的基本使用场景，当点击按钮时，视图根据值在组件间切换。 12.1.2 AST解析 的解读和前面几篇内容一致，会从解析阶段说起，过程也不会专注每一个细节，而是把和以往处理方式不同的地方特别说明。针对动态组件解析的差异，集中在上，由于标签上属性的存在，它会在最终的树上打上属性的标志。 最终的树如下：有了树，接下来是根据树生成可执行的函数，由于有属
vue源码分析-v-model的本质
yyzzabc123的博客
10-18 442
由于和前面介绍的插槽，事件一致，都属于vue提供的指令，所以我们对的分析方式和以往大同小异。分析会围绕模板的编译，函数的生成，到最后真实节点的挂载顺序执行。最终我们依然会得到一个结论，v-model无论什么使用场景，本质上都是一个语法糖。和表单脱离不了关系，之所以视图能影响数据，本质上这个视图需要可交互的，因此表单是实现这一交互的前提。表单的使用以为核心，更细的划分结合的使用如下： 接下来的分析，我们以普通输入框为例 进入正文前先回顾一下模板到真实节点的过程。接下来，我们先看看模板解析为树的过程。模板的编译
vue源码分析-组件
yyzzabc123的博客
11-04 398
我们知道，组件是Vue体系的核心，熟练使用组件是掌握Vue进行开发的基础。上一节中，我们深入了解了Vue组件注册到使用渲染的完整流程。这一节我们会在上一节的基础上介绍组件的两个高级用法：异步组件和函数式组件。
vue3源码分析 -- watch
最新发布
triggerV的博客
03-29 1209
1）watch函数实际执行的是doWatch方法，调度器scheduler在watch中很关键2）scheduler两者之间存在互相作用的关系，一旦effect触发了scheduler，那么会导致执行，job方法就被塞入微任务的队列中3）只要job()触发，那么就表示watch触发了一次。
Vue源码学习之render
Irene1991的博客
03-03 309
Vue源码学习之render
vue2 中如何使用 render 函数编写组件
JackZhouMine
06-07 6194
vue 提供了声明式编写 UI 的方式，即 vue 提供了对 DOM 进行描述的方式。有两种描述 DOM 的方式：模板和 render 函数。模板在编译阶段会被转成 render 函数，这一过程叫编译模板。模板可读性好，但是有时候模板并不灵活，大型的模板可读性也不好。render 函数可读性不高，但是灵活，使用 render 函数封装组件，使用得当，可提高组件的扩展性和易用性。jsx 可解决 render 函数读写性不高的问题。在 vue 的项目入口文件中，下面的代码新建一个 vue 应用的根组件，并默认命
Vue源码解析系列——数据驱动篇：render的执行过程
hd101367816的博客
02-06 536
准备 vue版本号2.6.12，为方便分析，选择了runtime+compiler版本。 _render的定义 Vue原型上_render定义在core/instance/render.js，这个文件随着core/instance/index.js中renderMixin(Vue)的调用而加载。 以下是render.js文件。（剔除了非主线分代码，下同） /** core/instance/render.js **/ //在Vue原型上挂载私有的_render方法 Vue.prototype._ren
Vue3：代理对象(Proxy)、渲染函数(render)
孤安先生的博客，作者主站正在重构中，敬请期待！
06-17 856
在vue3 的组合式API 中，渲染函数就是一个函数，名字不固定。render 函数返回什么，页面中就显示什么。在选项式API中，渲染函数名是固定的。
【Vue源码】第五节数据驱动之_render方法
未来可期
04-28 260
vue的_render定义在src/core/instance/render.js文件中： // src/core/instance/render.js Vue.prototype._render = function(): VNode { const vm: Component = this; // 在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终都需要 render 方法 ...
vue源码分析（五）——vue render 函数的使用
weixin_44784401的博客
10-28 589
vue源码分析（五）——vue render 函数的使用, vm._c 和 vm.$createElement 调用 createElement 方法的区别
【Vue原理】Render - 源码版 之 主要 Render
Crazymryan的博客
10-22 469
专注Vue源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本2.5.17compile 我们已经讲了九篇的内容了...
vue render传入this_【Vue原理】Render - 源码版 之 主要 Render
weixin_42501035的博客
01-27 736
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Render - 源码版 之 主要 Render compile 我们已经讲了九篇的内容了，终于走到了 render，今天...
JavaScript 的 Proxy详解
计算姬的博客
09-02 7673
Proxy详解零、引言一、Proxy是什么？1.1 理解Proxy1.2 Proxy怎么用1.3 可以拦截的操作1.4 this的指向二、Proxy能干什么？2.1 get()2.2 set()2.3 apply()2.4 construct ()三、Vue中的Proxy和Object.defineProperty3.1 Object.defineProperty 实现observe3.2 Pro...
深入解析Vue源码：Vue-Source-code-analysis的实现细节
Vue源码遵循模块化开发的原则，通过多个子模块的协作实现整个框架的功能。主要可以分为以下几个部分： ### 1. 响应式系统 Vue最核心的特性之一是响应式系统，它的实现主要依赖于Object.defineProperty方法，这个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值