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

在这里插入图片描述

在这里插入图片描述

总结:

在这里插入图片描述

相关推荐

  1. ChatGLM3 解析

    2024-04-23 07:52:03       17 阅读
  2. vue3 解析之Reactive实现的原理

    2024-04-23 07:52:03       30 阅读
  3. 学习 Vue 3

    2024-04-23 07:52:03       43 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-23 07:52:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-23 07:52:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-23 07:52:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-23 07:52:03       20 阅读

热门阅读

  1. Rust语言之简单涉猎

    2024-04-23 07:52:03       13 阅读
  2. springboot WebSocket的用法

    2024-04-23 07:52:03       15 阅读
  3. K8S Pod 常见问题

    2024-04-23 07:52:03       15 阅读
  4. 2024年最新 CKA 试题题库及答案详解 导航页

    2024-04-23 07:52:03       17 阅读
  5. Linux学习(嵌入式硬件知识)

    2024-04-23 07:52:03       17 阅读
  6. 【Node.js】json-server

    2024-04-23 07:52:03       43 阅读
  7. Ruby中Rack中间件的作用是什么?如何应用?

    2024-04-23 07:52:03       30 阅读
  8. Kubernetes 核心技术组件Scheduler解析

    2024-04-23 07:52:03       51 阅读
  9. I fumo 星(STL,数学)

    2024-04-23 07:52:03       18 阅读
  10. Nginx四层负载均衡

    2024-04-23 07:52:03       26 阅读
  11. CSS3 transition过渡:打造流畅动画效果的全面指南

    2024-04-23 07:52:03       34 阅读
  12. 天星金融消保课堂开讲,金融健康意识再提升

    2024-04-23 07:52:03       16 阅读
  13. 说说redis的集群的原理吧

    2024-04-23 07:52:03       15 阅读