【学习笔记】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函数中返回的这个函数:

在这里插入图片描述

在这里插入图片描述

总结:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Golang 开发实战day11 - Pass By Value

🏆个人专栏 🤺 leetcode 🧗 Leetcode Prime 🏇 Golang20天教程 🚴‍♂️ Java问题收集园地 🌴 成长感悟 欢迎大家观看,不执着于追求顶峰,只享受探索过程 Golang 开发实战day11 - 按值…

vector的底层与使用

前言&#xff1a;vector是顺序表&#xff08;本质也是数组&#xff09; 文档参考网站&#xff1a;https://legacy.cplusplus.com/reference/vector/vector/vector/ //底层代码 #include<assert.h> #include<iostream> #include<vector> #include<string&g…

第二部分-Foundation基础-学习导航

专题地址&#xff1a;MacOS一站式程序开发系列专题 第一部分&#xff1a;基础入门-学习导航 ObjectiveC-第一部分-基础入门-学习导航 第二部分&#xff1a;Foundation基础学习导航 Foundation框架-13-数据对象&#xff1a;主要讲述NSRange, NSString, NSValue, NSNull, NSD…

CFCASSL证书的网络安全解决方案

在数字化时代&#xff0c;网络信息安全的重要性不言而喻。随着电子商务、在线交易、远程办公等互联网活动的日益普及&#xff0c;确保数据传输的安全性与隐私保护成为企业和用户共同关注的焦点。在此背景下&#xff0c;CFCA SSL证书作为一种权威、高效的网络安全解决方案&#…

[LitCTF 2023]PHP是世界上最好的语言!!、 [LitCTF 2023]Vim yyds、 [羊城杯 2020]easycon

目录 [LitCTF 2023]PHP是世界上最好的语言&#xff01;&#xff01; [LitCTF 2023]Vim yyds [羊城杯 2020]easycon [LitCTF 2023]PHP是世界上最好的语言&#xff01;&#xff01; 无参&#xff0c;根据题目提示看看php能否执行——返回1执行成功 用system()函数调用、执行ls …

C++教你如何模拟实现string,如何实现string写时拷贝

文章目录 前言成员变量默认成员函数默认构造函数拷贝构造函数析构函数赋值运算符重载 容量相关函数&#xff08;Capacity&#xff09;reserve函数resize函数size函数capacity 函数clear函数 修改函数&#xff08;Modifiers&#xff09;swap函数insert函数字符插入字符串插入 ap…

基于docker搭建瀚高数据库HighGo6.0.1【图文】

基于docker搭建瀚高数据库HighGo6.0.1 拉取镜像启动验证进入容器 登录数据库查看数据库加密方式修改加密方式为sm3进入数据库修改密码重启容器 数据库验证数据库密码到期参考 docker部署 https://blog.csdn.net/weixin_44385419/article/details/127738868 拉取镜像 docker p…

【Java】变量零基础教程

目录 一、引言 二、基本组成单位 三、变量的基本原理 四、变量的基本使用步骤 五、变量快速入门 六、变量使用的注意事项 一、引言 为什么需要变量&#xff1f; ​​​​​​一个程序就是一个世界。 大家看下图&#xff0c;是我们现实中的一张生活照&#xff0c;图里有树…

spring aop介绍

Spring AOP&#xff08;面向切面编程&#xff09;是一种编程范式&#xff0c;它允许开发者将横切关注点&#xff08;cross-cutting concerns&#xff09;从业务逻辑中分离出来&#xff0c;从而提高代码的模块化。在传统的对象导向编程中&#xff0c;这些横切关注点&#xff0c;…

ic基础|时序篇:握手协议valid和ready的时序优化

大家好&#xff0c;我是数字小熊饼干&#xff0c;一个练习时长两年半的ic打工人。我在两年前通过自学跨行社招加入了IC行业。现在我打算将这两年的工作经验和当初面试时最常问的一些问题进行总结&#xff0c;并通过汇总成文章的形式进行输出&#xff0c;相信无论你是在职的还是…

Maven的常用基本命令

Maven是一个Java项目的构建和依赖管理工具&#xff0c;它有一系列命令用于项目的构建、清理、安装、部署等操作。以下是一些Maven的常用命令及其详细解释与举例&#xff1a; 1.mvn clean 功能&#xff1a;清理项目构建过程中生成的中间文件和目标目录&#xff08;target&…

HarmonyOS开发案例:【视频播放器】

介绍 基于video、swiper和slider组件&#xff0c;实现简单的视频播放器&#xff0c;可支持海报轮播、视频播放等功能。 相关概念 [video组件]&#xff1a;视频播放组件。[swiper组件]&#xff1a;滑动容器&#xff0c;提供切换子组件显示的能力。[slider组件]&#xff1a;滑…

秋招之路 面经

这里参考一位很厉害的前辈所分享的他的嵌入式软件工程师秋招之路&#xff0c;自己详细的读了一下他的经历以及他的分享的秋招面试和项目经验的总结。 我的嵌入式软件工程师秋招之路&#xff08;文末送福利&#xff09;_嵌入式软件工程师 刷leetcode-CSDN博客 如何在面试中介绍…

针对窗口数量多导致窗口大小显示受限制的问题,使用滚动条控制窗口

建议&#xff1a;首先观察结果展示&#xff0c;判断是否可以满足你的需求。 目录 1. 问题分析 2. 解决方案 2.1 界面设计 2.2 生成代码 2.3 源码实现 3. 结果展示 1. 问题分析 项目需要显示的窗口数量颇多&#xff0c;主界面中&#xff0c;如果一次性显示全部窗口&#x…

Web3钱包开发获取测试币-Base Sepolia(二)

Web3钱包开发获取测试币-Base Sepolia(二) ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b0c0ac86b04a496087471388532bc54a.png) 基于上篇 Web3钱包开发获取测试币-Polygon Mumbai(一) &#xff1a;https://suwu150.blog.csdn.net/article/details/137949473 我…

MyBatis 框架学习(I)

MyBatis 框架学习(I) 文章目录 MyBatis 框架学习(I)1. 介绍2. 准备&测试3. MyBatis 注解基础操作3.1 日志输出3.2 Insert 操作3.3 Delete 操作3.4 Update 操作3.5 Select 操作 总结 1. 介绍 之前我们学习过利用JDBC操作数据库进行项目开发&#xff0c;但我们发现它操作起来…

扫描工具nmap

介绍 说到黑客&#xff0c;知识就是力量。您对目标系统或网络的了解越多&#xff0c;可用的选项就越多。因此&#xff0c;在进行任何利用尝试之前&#xff0c;必须进行适当的枚举。 假设我们获得了一个 IP&#xff08;或多个 IP 地址&#xff09;来执行安全审计。在我们做任何…

究竟该怎么寄快递才能安全无误的送到手中呢?

最近&#xff0c;小编上班了发现有同事在吐槽快递送到手中的时间很晚了&#xff0c;比预计的时间差了很多&#xff0c;并且产品也有不同程度的损坏。这就让我们很是恼火了&#xff0c;但是细细研究后才发现有一部分的原因竟然是我们的原因才导致的寄快递出现了很多纰漏。 首先…

使用JavaScript创建数组,并对其进行冒泡排序

JavaScript创建数组方式 字面量方式&#xff1a;使用方括号 [] 来创建数组&#xff0c;并在方括号内按顺序列出数组元素。 let arr [1, 2, 3, 4, 5]; Array() 构造函数方式&#xff1a;使用 new Array() 构造函数来创建数组&#xff0c;并传入数组元素作为参数。 let arr ne…

如何使用ChatGPT仿写一篇学术论文

点击下方▼▼▼▼链接直达AIPaperPass &#xff01; AIPaperPass - AI论文写作指导平台 目录 1.仿写的目的 2.根据专业方向搜集合适的文献 3.总结想要仿写的文献 4.使用ChatGPT一步一步仿写 5.书籍介绍 AIPaperPass智能论文写作平台 深入地阅读和分析你研究领域的相关文…