Vue.js中的虚拟DOM

一.节点和状态

在我们平常对DOM操作的时候,之前在vue没有诞生之前,以命令式的方式对DOM进行操作,页面上的每一个元素都可以看做成一个节点状态。

二.剔除和渲染

框架都有自己渲染的方式,假设一个页面的状态,随着Ajax请求的放松,状态发生改变,有以下的两种方式供你选择:

1.将前面所有的节点都清空,重写渲染新的节点。

2.只更新更改的部分。

从性能上看,只更新更改的部分,也许是最优解,因为这样大大减少了计算机的缓存,每一个节点都需要去通过监听。

三.什么是虚拟节点树

刚才讲了传统的操作页面的方式,通过命令式的一步步操作,虚拟DOM通过状态生成一个虚拟节点树,虚拟节点树其实是由组件树建立起来的整个虚拟节点(vnode)树。

四.渲染的流程

1.我们使用通过模板 来描述状态DOM之间的关系,

模板<---------------->DOM

2.通过编译模板将模板转换成渲染函数

模版------------------------>编译------------------->渲染函数(render)

3.执行渲染函数

渲染函数(render)----------------------->执行------------------->虚拟节点树(vnode)

4.虚拟节点树使用

虚拟节点树------------->使用------------------------>渲染页面

如果直接使用的话会覆盖旧的节点,

这个时候进行会存在对比

oldVnode和vnode进行对比,vnode是一JavaScript一个普通的对象。

通过patch算法得到一个新的虚拟节点树,来进行更新,达到最佳优化。

相关推荐
RadiumAg17 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo21 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele37 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258592 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端