首页 > 其他分享 >关于 vue 虚拟dom 的渲染机制的一些思考

关于 vue 虚拟dom 的渲染机制的一些思考

时间:2023-10-31 18:00:11浏览次数:28  
标签:vue 渲染 队列 dom 任务 执行

1. 虚拟dom 的渲染过程

2. vue3中 nexttick 的作用

 

1.虚拟dom 的渲染机制

我们在template中写的 div 和 其他的标签。不会被vue 当作是最终 渲染的dom, vue会将我们写入的标签 转化为 对象,通过diff算法,将其构造成一个虚拟树

每个树 都有一个 对应的key,这个key 作为不同阶段的标识,什么意思呢,就是 当树发生改变时,这个id会变,也作为vue 构造新树 以及与旧树比对的 标识

说到渲染 ,vue触发渲染有两种形式:第一种,当 template 里面的 输入数据 (由外部用户输入数据)数据发生改变时 ,第二种,vue 中 data 中 的属性值发生改变时,这两种情况都会触发 vue 渲染机制

渲染 过程: 上述说到了渲染的情形 ,下面说一下渲染 的节点 和渲染的过程

假设:data 中有一个属性叫做  change,如其名 ,这个属性的属性值 经常会发生改变 ,如果属性值 每改变一次 就渲染一次 ,那么是很耗性能的,vue 中做了一个最优处理方式 ,就是将改变的 数值 (任务),放到一个队列任务中,这个队列就好比一个排班人员

告诉我们的vue渲染 按照 “先进先出”的规则,依次处理渲染  队列中 待执行的任务。

听到这里,不免发问,这个任务队列一旦 给到 vue ,后面或中间 突然加任务还可以继续添加吗。其实 是不可以的。这就意味着这个任务 无法及时渲染到视图上,这就是批量执行,想执行 新的,就需要等到下一个事件循环(下一个任务队列)

要等到下一个任务队列 ,很明显 。在响应式环境下 ,做到 视图 和数据 同步渲染是不理想的,有没有 什么 补救的办法呢?看下 nextick

 

2. vue3中 nexttick 的作用:

这就是上述的补救办法 ,当 我们将批量执行任务 移交给 vue 去 执行(渲染) 时,在此之前 是否 能检查一下 是否有新加入的任务 ,如果有 就 给他响应的处理函数,相当于上车前临时补个票

nexttick 相当于 列车上的乘务员 ,在列车即将发车之际(当队列中待执行的任务移交给vue处理的时候),给 还未上车的旅客补个票帮助他们上车(帮助 突然加入的待执行任务  加入到  当前即将要执行队列中)

 

标签:vue,渲染,队列,dom,任务,执行
From: https://www.cnblogs.com/veegeer/p/17800714.html

相关文章

  • Vue2 基础入门
    1Vue1.2第一个Vue实例(HelloVue)1.3插值表达式{作用:利用表达式进行插值,渲染到页面中表达式:是可以被求值的代码,JS引擎会讲其计算出一个结果以下的情况都是表达式:money+100money-100money*10money/10price>=100?'真贵':'还行'obj.namearr[0]fn()ob......
  • 如何采用VuePress构建文档网站
    作者:倾城博客:https://www.codingbrick.com寄语:当你意识到面子不重要时,你才算个真正的成年人。在建设博客的初期,我采用GitBook构建了编码专家的专栏系统。GitBook是基于Node.js的静态页构建组件,可以将Markdown文档渲染为静态页,支持插件扩展,使用非常简单。由于它不支持深度的......
  • 02_jQuery DOM操作
    目录一、jQuery对象访问each(callback)size()和lengthselectorcontextget([index])index([selector|element])二、数据缓存data([key],[value])removeData([name|list])三、属性操作属性attr(name|pro|key,val|fn)removeAttr(name)prop(n|p|k,v|f)removeProp(name)attr()方法和......
  • Mac 中安装 vue 脚手架后报错 vue: command not found
    解决方案安装node、npm查看npm全局安装位置npmroot-g正确位置/usr/local/lib/node_modules修改位置npmconfigsetprefix/usr/local重新安装脚手架sudonpminstall-g@vue/cli查看vue版本vue-v......
  • 使用yarn build 打包vue项目时静态文件或图片未打包成功
    解决Vue项目使用yarnbuild打包时静态文件或图片未打包成功的问题1.检查vue.config.js文件首先,我们需要检查项目根目录下的vue.config.js文件,该文件用于配置Vue项目的打包和构建选项。在这个文件中,我们需要确认是否正确地配置了打包输出目录和文件规则。可以检查以下几个设置项:mod......
  • vue绑定事件
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>&l......
  • vue打包体积优化
    一、webpack-bundle-analyzer工具1、安装终端运行命令,根据包管理器自行选择命令#NPMnpminstall--save-devwebpack-bundle-analyzer#YARNyardadd-Dwebpack-bundle-analyzer2、代码引入将代码引入到vue.config.jsconstBundleAnalyzerPlugin=require('we......
  • dom-to-image图像失真
    //height:document.getElementById("hwLabelform").scrollHeight,//canvas高//width:document.getElementById("hwLabelform").scrollWidth,//canvas宽//scale:4,//按比例增加分辨率(2=双倍).domtoimage.toPng(document.getElementById('table'......
  • Unity 创建自定义渲染管线
    可以看官方的https://docs.unity3d.com/Manual/srp-custom-getting-started.html或者这位大佬的https://zhuanlan.zhihu.com/p/378828898......
  • 一个类似于Gridster的栅格布局系统Vue组件
    哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!VueGridLayout是一个类似于Gridster的栅格布局系统,适用于Vue.js,灵感来源于ReactGridLayout。特性可拖拽可调整大小静态部件(不可拖拽、调整大小)拖拽和调整大小时进行边界检查增减部件时避......