首页 > 编程语言 >学习Vue3 第五章(Vue核心虚拟Dom和 diff 算法)

学习Vue3 第五章(Vue核心虚拟Dom和 diff 算法)

时间:2023-11-28 16:24:47浏览次数:38  
标签:Vue DOM Dom 算法 虚拟 Vue3 diff

    介绍虚拟DOM

  虚拟DOM就是通过JS来生成一个AST节点树

     为什么要有虚拟DOM?

  一个dom上面的属性是非常多的,所以直接操作DOM非常浪费性能

  介绍Diff算法

  diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图,所以 diff 算法本质上就是比较两个js对象的差异

  特点

  1. 比较只会在同层级进行,不会跨层级比较

 

          2. 在diff比较的构成中,循环从两边向中间比较

 

标签:Vue,DOM,Dom,算法,虚拟,Vue3,diff
From: https://www.cnblogs.com/liziqian001/p/17862236.html

相关文章

  • Vue动态更新数据内容,百度下拉框提示
     <!DOCTYPEhtml><html> <head> <metacharset="utf-8"/> <metaname="viewport"content="width=device-width,initial-scale=1"> <scriptsrc="js/vue.js"></script> <......
  • VUE前后端分离项目,前端打包,可配置修改环境变量文件,无需再次打包
      懒得打字了,直接截图,转载自:https://blog.csdn.net/CSDN_33901573/article/details/130603111        ......
  • 学习Vue3 第四章 vue指令
    指令v-开头都是vue的指令v-text用来显示文本v-html用来展示富文本v-if用来控制元素的显示隐藏(切换真假DOM)v-else-if表示v-if的“elseif块”。可以链式调用v-elsev-if条件收尾语句v-show用来控制元......
  • vue3 项目中出现的空白页面的总结(巨坑)
    一、背景开局先说一句!!!!好坑!!!!!,我遇到的空白页面的问题,不是路由懒加载的原因,是在点击路由完整的状态下,点击菜单跳转页面,出现的空白页面,不能触发页面中任何钩子函数,但是路由是跳了的,重新刷新页面,页面内容即可出现,而且空白出现率相当高。打开浏览器控制台和项目控制台都不报......
  • Vue3 第三章
    Vite目录public下面的不会被编译可以存放静态资源 assets下面可以存放可编译的静态资源 components下面用来存放我们的组件 App.vue是全局组件 maints全局的ts文件index......
  • ruoyi vue 前后端分离版本 打包分离jar包至lib
    环境:若依前后端分离版本,原打包时将所有的依赖jar包放至ruoyi-admin.jar包中,该包130MB,过大。需求:为了减少打包更新上传的时间,减少至1.1mb1、将不常更新的模块jar包分离至lib文件夹2、将常更新的模块如common、system等打包至jar包中。在ruoyi-admin的pom文件中添加如下: ......
  • [Vue] vue学习笔记(2): 监视属性 & 计算属性
    关于计算属性案例:分别输入姓和名,打印全名基本代码<divid='root'> firstname<inputtype="text"v-model="firstname"><br/><br/> lastname<inputtype="text"v-model="lastname"><br/><br/>......
  • VUE2中使用阿里云播放器AliPlayer
    简述基于Vue的播放器单页应用,利用web播放器sdk进行视频点播,包含播放列表、字幕、多语言、自适应码率,皮肤自定义等功能Web播放器文档前情提示系统:一说部分截图、链接等因过期、更换域名、MD语法等可能不显示,可联系反馈(备注好博文地址),谢谢❤带有#号、删除线、不操作、不......
  • VUE2中使用阿里云播放器AliPlayer
    简述基于Vue的播放器单页应用,利用web播放器sdk进行视频点播,包含播放列表、字幕、多语言、自适应码率,皮肤自定义等功能Web播放器文档前情提示系统:一说部分截图、链接等因过期、更换域名、MD语法等可能不显示,可联系反馈(备注好博文地址),谢谢❤带有#号、删除线、不操作、不......
  • Vue打包发布
    打包发布目标:明确打包的作用说明:vue脚手架只是开发过程中,协助开发的工具,当真正开发完了,脚手架不参与上线打包的作用:将多个文件压缩合并成一个文件语法降级lesssassts语法解析....打包后,可以生成,浏览器能够直接运行的网页命令:npmrunbuild打包完成后,你会在项目根目......