【学习笔记】Vue3源码解析:第五部分 - 实现渲染(3)

课程地址:【已完结】全网最详细Vue3源码解析!(一行行带你手写Vue3源码)

第五部分-:(对应课程的第36 - 37节)

第36节:《处理proxy,方便取值》

1、执行组件中的 render 方法并传递实例对象为参数:

在这里插入图片描述

2、在组件render函数中打印proxy,即传递的实例对象这个参数:

在这里插入图片描述

在这里插入图片描述

观察打印出的结果,会发现此时如果想取到props中的数据,需要 proxy.props.name 的形式。但之前在源码中测试发现,直接 proxy.name 就可以取到。为了实现这个效果,我们用一个 Proxy 来实现:

在这里插入图片描述

在这里插入图片描述

这样我们就实现了在render方法中用 proxy.name 的形式直接取到值:

在这里插入图片描述

在这里插入图片描述

补充Proxy中的set方法:

在这里插入图片描述

测试在 render 方法中直接通过 proxy.name 取值:

在这里插入图片描述

第37节:《处理render方法》

1、如果组件中有render函数,同时setup的返回值也是一个函数,则只会执行setup返回的这个函数,而不会再执行render函数:

在这里插入图片描述

在这里插入图片描述

2、完善代码:判断组件有没有 setup,如果有,执行 setup 并拿到其返回值,setup 的返回值可能是一个对象,也可能是一个函数。如果是对象,就将这个对象的值放到组件实例 instance 的 setupState 中;如果是函数,就将其作为render函数来处理。

在这里插入图片描述

3、在组件实例对象上增加一个render属性:

在这里插入图片描述

4、定义 handelSetupResult 方法:

在这里插入图片描述

5、定义 finishComponentSetup 方法:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

6、在setup中添加一个函数类型的返回值,此时 finishComponentSetup 方法中打印出来的 instance.render 就是setup函数中返回的这个函数:

在这里插入图片描述

在这里插入图片描述

总结:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/565172.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

BootstrapAdmin Net7:基于RBAC的后台管理框架,实现精细化权限管理与多站点单点登录

BootstrapAdmin Net7:基于RBAC的后台管理框架,实现精细化权限管理与多站点单点登录 摘要 随着企业信息化建设的不断深入,后台管理系统在企业运营中扮演着越来越重要的角色。本文介绍了一款基于RBAC(Role-Based Access Control)的…

腾讯云轻量2核2G4M服务器优惠价格99元一年,多配置报价单

腾讯云轻量2核2G4M服务器优惠价格99元一年,多配置报价单。腾讯云服务器价格表2024年最新价格,轻量2核2G3M服务器61元一年、2核2G4M服务器99元1年,三年560元、2核4G5M服务器165元一年、3年900元、轻量4核8M12M服务器646元15个月、4核16G10M配置…

WEB攻防-ASP安全-ASP后门植入连接

windows2003环境搭建,可参考上一篇WEB攻防-ASP安全-MDB下载-CSDN博客 将aspcms解压到C:\inetpub\wwwroot,创建网站并赋予internet来宾用户权限 配置启用父路径和主页指向 上一篇文章提到,数据库文件后缀为asp、asa会被执行解析,所以当进行访…

Redis中的慢查询日志和监视器

慢查询 添加新日志 在每次执行命令的之前和之后,程序都会记录微妙格式的当前UNIX时间戳,这两个时间戳之间的差就是服务器执行命令所耗费的时长,服务器会将这个时长作为参数之一传给slowlogPushEntryIfNeeded函数,而slowlogPushE…

每日算法之矩阵置零

题目描述 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。 示例 1: 输入:matrix [[1,1,1],[1,0,1],[1,1,1]] 输出:[[1,0,1],[0,0,0],[1,0,1]] 示例 2: 输入&#x…

TQZC706开发板教程:编译zynq linux内核2019_R1

您需要下载对应版本的Linux系统文件以及IMG1.3.1镜像文件。为了方便您的操作,本文所使用的所有文件以及最终生成的文件,我都已经整理并放置在本文末尾提供的网盘链接中。您可以直接通过该链接进行下载,无需在其他地方单独搜索和获取。希望这能…

前端三剑客 HTML+CSS+JavaScript ③ HTML标准结构

生活没有任何意义&#xff0c;这就是活着的理由&#xff0c;而且是唯一的理由 —— 24.4.22 一、HTML注释 1.特点 注释的内容会被浏览器所忽略&#xff0c;不会呈现到页面中&#xff0c;但源代码中依然可见 2.作用 对代码进行解释和说明 3.写法 <!-- xxxxx --> <html&…

webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)

文章目录 ⭐前言⭐canvas绘制图片&#x1f496;状态保存和恢复&#x1f496;移动、旋转、缩放、变形&#x1f496;移动绘制一个渐变的box&#x1f496;旋转&#x1f496;缩放 ⭐模拟冒泡排序过程⭐结束 ⭐前言 大家好&#xff0c;我是yma16&#xff0c;本文分享webgl canvas系…

【MySQL 数据宝典】【磁盘结构】- 002 数据字典

一、数据字典 ( Data Dictionary ) 1.1 背景介绍 我们平时使用 INSERT 语句向表中插入的那些记录称之为用户数据&#xff0c;MySQL只是作为一个软件来为我们来保管这 些数据&#xff0c;提供方便的增删改查接口而已。但是每当我们向一个表中插入一条记录的时候&#xff0c;MyS…

周鸿祎和雷军、马化腾相逢一笑泯恩仇

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 马云竟然没有到场&#xff0c;真是遗憾! 前两天工信部和互联网协会联合举办的中国互联网三十周年座谈会上。周鸿祎、雷军、马化腾相逢一笑泯恩仇。 第一条视频&#xff1a; 周鸿祎和马化腾握手言欢&#xff0c…

Mendix是谁?作为致力于企业低代码服务平台的领头羊,它解决了哪些问题?

一、Mendix 成立的背景 Mendix的成立是为了解决软件开发中最大的问题&#xff1a;业务和IT之间的脱节。这一挑战在各个行业和地区都很普遍&#xff0c;很简单&#xff1a;业务需求通常被描述为IT无法正确解释并转化为软件。业务和IT之间缺乏协作的原因是传统的代码将开发过程限…

Vue.js前端开发零基础教学(六)

学习目标 了解什么是路由&#xff0c;能够说出前端后端路由的原理 掌握多种路由的使用方法&#xff0c;能够实现路由的不同功能 掌握Vue Router的安装及基本使用方法 5.1 初始路由 提到路由&#xff08;Route),一般我们会联想到网络中常见的路由器&#xff08;Router),…

30 消息队列

原理 操作系统可以通过页表映射在共享区创建一块共享内存&#xff0c;也可以申请一个队列。A进程和B进程可以向这个队列发送数据块&#xff0c;两个进程接收数据块来通信 函数 申请数据块 参数中的key来自于ftok函数 删除消息队列 同样消息队列也有数据结构管理&#xff…

c#学习入门1

一、环境配置 颜色主题 字体设置 行号设置 二、第一个应用程序 1. 在解决方案下创建一个新项目 第一种注释&#xff1a;两杠注释 第二种注释&#xff1a;星号注释 第三种注释&#xff1a;三杠注释(只有在花括号后面输出才会自动补全&#xff09; 2.控制台输入打印基础语句 输…

java在线问卷调查系统的设计与实现(springboot+mysql源码+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的在线问卷调查系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 基于java的在线问卷调查…

HBM:小贵但AI需要

即将推出的高带宽内存 high-bandwidth memory在散热方面还存在挑战&#xff0c;但可能即将得到改善。 高带宽内存 &#xff08;HBM&#xff09; 正在成为算力提供商的首选内存&#xff0c;由于 AI/ML 的需求&#xff0c;使用量也在继续增长&#xff0c;HBM 提供紧凑的 2.5D 外形…

P1024 [NOIP2001 提高组] 一元三次方程求解

题目描述&#xff1a; AC代码&#xff1a; #include<iostream>using namespace std;double a,b,c,d; int ans 0;double f(double x) {return a * x * x * x b * x * x c * x d; }int main() {scanf("%lf %lf %lf %lf",&a,&b,&c,&d);for…

钉钉报警的优势在哪里?如何配置钉钉机器人进行报警信息推送?

一、常见的报警方式 1、短信或者电话报警 这样的报警方式更适合高级别的报警提醒&#xff0c;用于处理紧急情况。出现级别不高而又频繁地发送短信会让人产生排斥感&#xff0c;而且电话或者短信的报警方式也存在一定的成本。 2、邮件报警 邮件报警更适用于工作时的提醒&…

DSSM 模型技术介绍

转自&#xff1a;git 本文属于新闻推荐实战-召回阶段-DSSM召回模型。区别于策略召回&#xff0c;基于向量召回也是目前工业界常用的一种召回方法。这里我们将介绍一个比较经典的召回模型DSSM&#xff0c;希望读者可以快速掌握模型原理以及细节&#xff0c;同时可以了解具体的实…

第25天:安全开发-PHP应用文件管理包含写入删除下载上传遍历安全

第二十五天 一、PHP文件管理-下载&删除功能实现 1.文件上传&#xff1a; 无过滤机制黑名单过滤机制白名单过滤机制文件类型过滤机制 2.文件删除&#xff1a; unlink() 文件删除函数调用命令删除&#xff1a;system shell_exec exec等 3. 文件下载&#xff1a; 修改HT…