Vue2源码梳理:render函数的实现
render
- 在 $mount 时,会调用 render 方法
- 在写 template 时,最终也会转换成 render 方法
- Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node
- 它的定义在 src/core/instance/render.js 文件中,它返回的是一个vnode
- 这里看下它的实现
Vue.prototype._render = function (): VNode {const vm: Component = this// 从 $options 中拿到这个 render 函数// 这个 render 函数, 可以是用户自己写,也可以通过编译生成const { render, _parentVnode } = vm.$options// 跳过// reset _rendered flag on slots for duplicate slot checkif (process.env.NODE_ENV !== 'production') {for (const key in vm.$slots) {// $flow-disable-linevm.$slots[key]._rendered = false}}// 跳过if (_parentVnode) {vm.$scopedSlots = _parentVnode.data.scopedSlots || emptyObject}// 跳过// set parent vnode. this allows render functions to have access// to the data on the placeholder node.vm.$vnode = _parentVnode// render selflet vnodetry {// call的第一个参数是当前上下文, vm._renderProxy 在生产环境下,就是 VM,也就是this本身, 在开发环境它可能是一个proxy对象 // 这个 vm.$createElement 也是一个函数,会在下面来说// 总体来说就是生成 vnodevnode = render.call(vm._renderProxy, vm.$createElement)} catch (e) {// 捕获并处理错误,尝试再次生成 vnodehandleError(e, vm, `render`)// return error render result,// or previous vnode to prevent render error causing blank component/* istanbul ignore else */if (process.env.NODE_ENV !== 'production') {if (vm.$options.renderError) {try {vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)} catch (e) {handleError(e, vm, `renderError`)vnode = vm._vnode}} else {vnode = vm._vnode}} else {vnode = vm._vnode}}// return empty vnode in case the render function errored outif (!(vnode instanceof VNode)) {// 如果拿到的 vnode 是个数组,说明模板有多个根节点,这个在后续vue3中支持,在vue2中会报下面的警告// 在vue2 中 vnode 是一个 vdom, if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {warn('Multiple root nodes returned from render function. Render function ' +'should return a single root node.',vm)}vnode = createEmptyVNode()}// set parentvnode.parent = _parentVnodereturn vnode }- 注意,上面的 vm.$createElement 在 initRender 函数中被初始化定义
- 而 initRender 是在一开始 new Vue 的时候,会调用 _init 函数中被执行
// initRender 函数中 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)- 看到上面两个函数区别,就是最后一个参数不一样
_c这个函数它实际上是被编译生成的render函数所使用的一个方法$createElement是给我们手写render函数提供了一个创建vnode的一个方法var app = new Vue({el: '#app',// 手写 render 函数render(createElement) {return createElement('div', {attrs: {id: 'app2' // 这些写后,这里挂载的 div 元素,会替换掉之前的 #app 容器}}, this.message)},data() {return {message: 'Hello'}} })- 这里,使用render和在html中写是不一样的,它没有一个把从差值变换的这个过程
- 之前的写法是在HTML里面定义了这个差值
// 之前的写法 <div id="app">{{ message }} </div> - 它在不执行vue的时候,它会先把这个东西渲染出来
- 然后在new vue之后, 执行 mount 的时候,再把它从差值的那个message给替换成真实的数据
- 在这里是通过纯 render 函数,当它执行完毕以后,直接挂载到页面上,这样的话体验会更好一点
- 因为这里手写了 render 函数,所以, 整个渲染流程中,就不会再执行把 template 转换 render 函数那一步了
- 所以就相当于直接就达到了一样的效果
vm._renderProxy的定义,也是发生在 src/core/instance/init.js 中- 在 _init 函数中,有一个判断
/* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') {initProxy(vm) } else {vm._renderProxy = vm }- 当前如果说是生产环境,
vm._renderProxy = vm - 开发阶段开发阶段,则执行
initProxy(vm)定义在 src/core/instance/proxy.js 中// 报错提示函数 const warnNonPresent = (target, key) => {warn(`Property or method "${key}" is not defined on the instance but ` +'referenced during render. Make sure that this property is reactive, ' +'either in the data option, or for class-based components, by ' +'initializing the property. ' +'See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.',target) } // const hasHandler = {has (target, key) {const has = key in targetconst isAllowed = allowedGlobals(key) || (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data)) // 全局方法或者私有方法,或不在$data中// 属性不在 target 下,并且不被允许,则报错提示,比如:使用了 一个没有在 data 中定义的变量,就会报错if (!has && !isAllowed) {if (key in target.$data) warnReservedPrefix(target, key)else warnNonPresent(target, key)}return has || !isAllowed} }// 判断当前浏览器是否支持 proxy,Proxy作用是对对象的访问做一个劫持 const hasProxy = typeof Proxy !== 'undefined' && isNative(Proxy)initProxy = function initProxy (vm) {if (hasProxy) {// determine which proxy handler to useconst options = vm.$optionsconst handlers = options.render && options.render._withStripped? getHandler: hasHandlervm._renderProxy = new Proxy(vm, handlers) // 在这里 handlers 是 hasHandler} else {vm._renderProxy = vm} } - 这里可以看到,支持 Proxy 则
vm._renderProxy = new Proxy(vm, handlers)
- 当前如果说是生产环境,
- 通过以上分析可知,vm._render 最终是通过执行 createElement 方法并返回的是 vnode
- 而返回的vnode 它是一个虚拟 Node
相关文章:
Vue2源码梳理:render函数的实现
render 在 $mount 时,会调用 render 方法在写 template 时,最终也会转换成 render 方法Vue 的 _render 方法是实例的一个私有方法,它用来把实例渲染成一个虚拟 Node它的定义在 src/core/instance/render.js 文件中,它返回的是一个…...
flask+python企业产品订单管理系统938re
在设计中采用“自下而上”的思想,在创新型产品提前购模块实现了个人中心、个体管理、发布企业管理、投资企业管理、项目分类管理、产品项目管理、个体投资管理、企业投资管理、个体订单管理、企业订单管理、系统管理等的功能性进行操作。最终,对基本系统…...
Vue2源码梳理:关于数据驱动,与new Vue时的初始化操作
数据驱动 1 )概述 vue的一个核心思想,就是数据驱动 所谓数据驱动,就是指视图是由数据驱动生成的 对视图的修改并不会直接操作dom,而是通过修改数据 它相比我们传统的前端开发,如使用 jQuery 的前端库直接去修改 dom…...
【C++航海王:追寻罗杰的编程之路】关于模板,你知道哪些?
目录 1 -> 泛型编程 2 -> 函数模板 2.1 -> 函数模板概念 2.2 -> 函数模板格式 2.3 -> 函数模板的原理 2.4 -> 函数模板的实例化 2.5 -> 函数参数的匹配原则 3 -> 类模板 3.1 -> 类模板的定义格式 3.2 -> 类模板的实例化 1 -> 泛型编…...
分布式springboot 3项目集成mybatis官方生成器开发记录
文章目录 说明实现思路实现步骤第一步:创建generator子模块第二步:引入相关maven插件和依赖第三步:编写生成器配置文件第四步:运行查看结果 说明 该文章为作者开发学习记录,方便以后复习和交流主要内容为:…...
算法学习——LeetCode力扣回溯篇4
算法学习——LeetCode力扣回溯篇4 332. 重新安排行程 332. 重新安排行程 - 力扣(LeetCode) 描述 给你一份航线列表 tickets ,其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票…...
c++ STL系列——(六)multimap
C标准模板库(STL)是C编程中不可或缺的一部分,它提供了一系列的容器、算法和函数模板,以简化常见的数据结构和算法的实现。在STL中,multimap是一个非常有用的容器,它提供了一种键值对的存储方式,…...
Json-序列化字符串时间格式问题
序列化字符串时间格式问题 一、项目场景二、问题描述三、解决方案 一、项目场景 最近C#中需要将实体进行json序列化,使用了Newtonsoft.Json public static void TestJson(){DataTable dt new DataTable();dt.Columns.Add("Age", Type.GetType("Sys…...
HarmonyOS鸿蒙学习基础篇 - 自定义组件(一)
前言 在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离&#…...
开窗,挖槽,放电齿,拼版
我们在阻焊层画线,就相当于去掉绿油阻焊,开窗一般是用在大电流走线的时候。先画要走的导线,之后切换到TopSolder或者Bottom Solder层,然后Place->line 画一条和原来先粗细一样的线即可!但走电流的仍然是导线&#x…...
[Vue的组件通讯.sync修饰]Vue中.sync的使用方法和实现的方式 代码注释
目录 .sync的使用方法1. 在父组件中,将需要传递给子组件的数据使用v-bind绑定到子组件的props中,并在属性名后加上.sync修饰符,如下所示:2. 在子组件中,将需要传递给父组件的数据使用$emit方法触发一个名为update:valu…...
Java 基于springboot+vue在线外卖点餐系统,附源码
博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
Decian 12.x基于LNMP安装phpIPAM(IP管理系统)
phpipam是一个开源Web IP地址管理应用程序(IPAM)。其目标是提供轻便,且有用的IP地址管理系统。它是基于PHP的应用程序,具有MySQL数据库后端,使用jQuery库,ajax和HTML5 / CSS3功能。 在Debian 12中&…...
【多模态MLLMs+图像编辑】MGIE:苹果开源基于指令和大语言模型的图片编辑神器(24.02.03开源)
项目主页:https://mllm-ie.github.io/ 论文 :基于指令和多模态大语言模型图片编辑 2309.Guiding Instruction-based Image Editing via Multimodal Large Language Models (加州大学圣巴拉分校苹果) 代码:https://github.com/appl…...
hpp文件:C++开发中的利器
1 什么是hpp文件? hpp文件是C程序中一种特殊头文件,它可以包含类的声明和实现。与传统的h文件相比,hpp文件具有以下特点: 将类的声明和实现放在同一个文件里,减少了代码量,提高了代码的可读性。无需再将c…...
如何查看电脑连接的wifi的密码
问题 很多时候我们电脑连上wifi之后就把密码忘记了,这个时候如果同事问自己密码是多少,如果作为程序员说不知道是不是感觉有点不好意思,哈哈…… 解决 我使用的是windows电脑,就以windows为例说明下自己是如何查看的。 打开wi…...
QTabWidget和QTabBar控件样式设置(qss)
QTabWidget和QTabBar控件样式设置 1、QTabWidget样式可自定义的有哪些示例:效果图 2、QTabBar样式可自定义的有哪些示例效果图 1、QTabWidget样式可自定义的有哪些 QTabWidget::pane{} 定义tabWidgetFrameQTabWidget::tab-bar{} 定义TabBar的位置QTabWidget::tab{}定…...
【智能家居入门3】(MQTT服务器、MQTT协议、微信小程序、STM32)
前面已经写了三篇博客关于智能家居的,服务器全都是使用ONENET中国移动,他最大的优点就是作为数据收发的中转站是免费的。本篇使用专门适配MQTT协议的MQTT服务器,有公用的,也可以自己搭建(应该要钱)…...
C语言第二十四弹---指针(八)
✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】 指针 1、数组和指针笔试题解析 1.1、字符数组 1.1.1、代码1: 1.1.2、代码2: 1.1.3、代码3: 1.1.4、代码4: 1…...
m1芯片xcode15编译cocos2dx一些报错处理
报错1: No matching function for call to ‘iconv’ No matching function for call to ‘iconv_close’ 解决: 强转: iconv_close((iconv_t)_iconv); iconv((iconv_t)_iconv, (char**)&pin, &inLen, &pout, &outLen); 报错2: Proper…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
