大家也可以去我的博客看相关技术文章,欢迎大家,一同进步!!!!
vue3 源码分析,第二章 vue3的设计思路
目录
声明式的描述UI
声明式的描述UI有两种方式
模板 template
<h1 @click="handler"><span></span></h1>
JavaScript 对象 (虚拟dom)
const title = {
tag: "h1",
props: {
onClick: handler,
},
children: [{ tag: "span" }],
};
有啥区别?模板没有JS对象灵活,可以看下下面的场景
let level = 3;
const title = {
tag: `h${level}`,
};
补充1: h函数,编写虚拟dom更加方便的工具函数
import { h } from "vue";
export default {
render() {
return h("h1", { onClick: handler }); // 虚拟 DOM
},
};
关于h函数,这里我们简单说明下:
- h函数就是用来描述UI的,他也属于JS描述UI这一类
- 所以
h函数
就是一个辅助创建虚拟DOM
的工具函数
补充2: 渲染函数
- 一个组件要渲染的内容是通过渲染函数来描述的
- 渲染函数
render
的返回值就是使用JS描述的UI,也就是虚拟DOM
渲染器
我们有了声明式描述UI的方式,采用虚拟dom,即JS的方式,那么虚拟DOM如何变成真正的DOM呢?
- 渲染器 (虚拟DOM => 渲染器 => 真实DOM)
渲染器的作用
可以暂时不关心渲染器的内部实现,抽象的看,它就是这样的
function renderer(vnode, container) {
// ...
}
- vnode 虚拟DOM对象,container,一个真实的DOM元素
所以:渲染器只做一件事情,就是把虚拟DOM渲染成真实的DOM,并挂载到对应节点上
组件的本质
-
本质:组件就是一组DOM元素的封装,也使用虚拟DOM描述
-
这组DOM元素就是组件要渲染的内容
-
组件可以是用函数,也可以是对象,只要是一组DOM的描述即可
有了组件,那么渲染器针对组件就要做能力的增强,支持渲染组件,抽象的看
function renderer(vnode, container) {
if (typeof vnode.tag === "string") {
mountElement(vnode, container);
} else if (typeof vnode.tage === "function") {
// 组件
mountComponent(vnode, container);
}
}
模板的工作原理
其实模板很好理解,模板和编译器相关
- 模板(template) => 编译器 => 渲染函数(模板里内容就在render)
- 渲染函数执行 => 虚拟DOM
- 虚拟DOM => 渲染器 => 真实DOM
总结
- 描述UI的两种 模板、JS(虚拟DOM)
- 渲染器,渲染器的作用就是 (虚拟DOM => 渲染器 => 真实DOM)
- 组件 – 一组虚拟DOM的封装,而这组虚拟DOM就是组件需要渲染的
- 编译器,编译器将模板编译为渲染函数
原文链接:https://juejin.cn/post/7333937659838709812 作者:知无涯者