Vuejs设计与实现4-渲染器设计
实现 设计 vuejs
2023-09-14 09:13:58 时间
四、渲染器设计
渲染器+响应系统
最简渲染函数
使用以下函数渲染静态字符串或者动态拼接内容
// 渲染函数
function renderer(domString, container) {
container.innerHTML = domString;
}
// 渲染dom
renderer("<p>123</p>", document.getElementById("main"));
vuereactivity
@vue/reactivity
包包含了副作用函数 effect 以及响应式 ref
渲染器基本原理
渲染器 renderer,渲染 render
虚拟节点(vnode) === 虚拟 DOM(vdom)
渲染器把虚拟 DOM 节点渲染为真实 DOM 节点的过程叫作挂载(mount)
第一次渲染称为挂载
后续渲染称为打补丁(patch),也即更新 dom
DIY 渲染器
createRenderer 函数
这是一个构建渲染器的函数,特别留意其中的打补丁 patch 函数的编写!
patch 的三个参数分别指:旧 vnode,新 vnode,挂载位置
function createRenderer() {
// dom更新函数
function patch(n1, n2, container) {}
// 渲染函数
function render(vnode, container) {
// 如果虚拟DOM存在,则执行更新程序
// 如果不存在,就挂载它
if (vnode) {
patch(container._vnode, vnode, container);
} else {
if (container._vnode) {
container.innerHTML = "";
}
}
container._vnode = vnode;
}
}
构建一个 vnode 然后渲染它
const vnode = {
type: "h1",
children: "helloworld",
};
const renderer = createRenderer();
renderer.render(vnode, document.querySelector("#main"));
兼容所有浏览器渲染需求
可以将配置项交予渲染者进行定义,而不写死,这样就可以适配多浏览器了!
首先在渲染器函数内定义三大配置项:
function createRenderer() {
// 定义三大配置项
const { createElement, insert, setElementText } = options;
function mountElement(){...}
}
定义 mountElement
// 挂载元素函数
function mountElement(vnode, container) {
// 判断元素类型
const ele = createElement(vnode.type);
// 如果类型为string,那么设置文本
if (typeof vnode.children === "string") {
setElementText(ele, vnode.children);
}
// 将新元素插入到指定挂载点
insert(ele, container);
}
相关文章
- C语言异常与断言接口与实现
- Java实现 蓝桥杯 算法训练 Balloons in a Box
- java实现第四届蓝桥杯逆波兰表达式
- Java实现 蓝桥杯 历届试题 波动数列
- Java实现 蓝桥杯VIP 算法训练 统计字符次数
- Java实现 蓝桥杯VIP 算法训练 特殊的数字四十
- CNStack 网络插件:hybridnet 的设计与实现
- open-flash-chart 教程例子实现
- SpringMVC文件上传接口设计与实现
- 分布式框架服务调用超时设计与实现
- 《安富莱嵌入式周报》第301期:ThreadX老大离开微软推出PX5 RTOS第5代系统,支持回流焊的自焊接PCB板设计,单色屏实现多级灰度播放视频效果
- Design layer interface的设计与实现
- Atitit qzone qq空间博客自动点赞与评论工具的设计与实现
- Atitit.导出excel报表的设计与实现java .net php 总结
- Atitit 插件机制原理与设计微内核 c# java 的实现attilax总结
- 浅谈电商网站开发中用户会话管理机制的设计和实现原理
- 使用Element实现轮播图组件(el-carousel)
- 【Android笔记44】Android利用DrawerLayout布局组件实现侧滑导航菜单的效果
- 移动机器人路径跟踪的设计和仿真模型预测控制(Matlab代码实现)
- Python实现贝叶斯优化器(Bayes_opt)优化循环神经网络分类模型(LSTM分类算法)项目实战
- IM设计与实现的系统模块的聊天记录
- go语言web开发系列之十一:gin框架通过casbin实现rbac权限设计(csv存储)
- Vuejs设计与实现9-编译器核心
- Vuejs设计与实现6-Diff算法
- Vuejs设计与实现2-响应系统
- Vuejs设计与实现1-框架设计概览
- Vuejs设计与实现7-组件实现原理
- Vuejs设计与实现5-挂载与更新
- 基于Java+SpringBoot+Vue前后端分离博客系统设计与实现