码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 【Vue 开发实战】基础篇 # 7:理解虚拟DOM及key属性的作用


    说明

    【Vue 开发实战】学习笔记。

    回顾 jquery

    事件操作 dom 会导致越来越乱

    在这里插入图片描述

    再看 vue

    引入 state 层,事件操作数据,vue 底层映射到 dom 上。

    在这里插入图片描述

    virtual dom

    数据变化,怎么尽可能的减少 dom 更新,就提出了虚拟 dom,它是 json 对象保留了 dom 树形结构信息

    在这里插入图片描述

    virtual dom diff

    dom 比对,找出差异

    在这里插入图片描述

    场景1:移动

    在这里插入图片描述

    映射到 dom,就是下面的结构

    在这里插入图片描述

    场景2:删除新建

    在这里插入图片描述

    场景3:删除新建

    在这里插入图片描述

    场景4:更新删除新建(无key)

    在这里插入图片描述
    对应的dom
    在这里插入图片描述

    场景5:移动(有key)

    加了 key,就通过 key 去判断,移动即可,不用删除新建

    在这里插入图片描述

    场景6:插入(有key)

    有了key,B1、B2、B3 可以复用,B4 直接插入即可

    在这里插入图片描述

  • 相关阅读:
    DataFunSummit:2023年数据基础架构峰会-核心PPT资料下载
    宁德时代换挡,钠电池“接力”锂电池?
    Visual Studio Code的下载和安装
    【从零开始学习 SystemVerilog】3.8、SystemVerilog 控制流—— Tasks(任务)
    PMP®|对如何做好项目管理的几点建议
    NTFS安全权限
    ASP.NET Core - 请求管道与中间件
    高速信号PCB布局怎么布?(电子硬件)
    [SpringCloudDataFlow v2.3.0源码系列]-2-从一个简单的例子出发
    【OpenCV】角点检测、特征点提取(Harris、Shi-Tomas、SIFT、SURF、FAST、ORB)学习笔记
  • 原文地址:https://blog.csdn.net/kaimo313/article/details/126700195
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号