快速了解Vue的渲染函数render

1,492 阅读2分钟

前言

📚最近重新夯实Vue3,梳理的相关知识点和细节

🎉目前已撒花的:

本文是对第4部分内容的补充,关于Vue的渲染函数,我将相关内容整理成以下脑图,一来可以快速了解相关知识,二来方便以后查看!

🎁看完此部分你将会,对Vue的渲染函数有个基本清晰的认识

本系列解决的问题

  1. 告别枯燥的文档;以图的形式,言简意赅的汇总所有Vue3.x的知识点

  2. 附高清原图和原文件;并原文件会随Vue版本迭代而长期更新

具体内容如下👇

脑图

渲染函数1

渲染函数只的是render函数,该函数返回h执行,h指定会创建虚拟DOM,所以我们得先了解什么是虚拟DOM

其实说白了就是一个js对象,这个对象是对真实DOM的一个描述,之后会根据这个虚拟DOM来渲染真实DOM。核心在于h函数的使用,需要留意它接收的参数

5.1渲染函数1.png

渲染函数2(用原生JS代替模板功能)

模板变成渲染函数的形式时,只要可以使用原生JS轻松完成的操作,渲染函数就不会提供专有的替代方法,比如可以在渲染函数中用JSif/else简单重写模板中使用的 v-if v-for等等

5.2渲染函数2(用原生JS代替模板功能).png

渲染函数3

需要注意渲染函数的返回值;以及了解函数式组件的使用,它可以直接传入渲染函数的h函数中

5.3渲染函数3.png

附件

我会将以上原图及源文件已上传githubgithub.com/jCodeLife/m…

目的:

  • 一来方便大家批量下载
  • 二来可以根据自己的想法和习惯进行修改

END

以上就是Vue中复用性相关的所有内容

如有问题,欢迎留言告知,感谢~