Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

    • UI 框架

      • Angular

        • Angular1.x学习
        • 浅谈Angular的脏检查机制
      • React

      • Solid

      • Svelte

      • Vue

      • 框架本质

    • 开发框架

    • 组件库

  • 工程能力

  • 应用基础

  • 专业领域

  • 业务场景

  • 大前端
  • 应用框架
  • UI 框架
  • Angular
gahing
2019/12/31

浅谈Angular的脏检查机制

没有学过 Angular,只是和朋友闲聊的时候谈到这个,本篇作为一个记录,谈谈我理解的脏检查

angular 不会去监听数据变动,而是当事件触发(模板绑定/主动触发)时,更新数据,最后会执行一个重渲染的操作

所以这一套机制很简单,触发了会改变应用程序状态的函数,会触发模板重渲染,一般有这几种活动:

  1. 事件:click,change
  2. xhr:远程数据获取
  3. 定时器

当然 由于没学过,不知道理解对不对


200318 更新:

上述几种行为,都是一个宏任务,angular 对这些 api 进行了封装。

在这个宏任务结束之后,会执行数据的批量更新,并重新编译模板生成虚拟 dom 树,后面的 diff 就和 react 类似了

后面的步骤,可能是像 vue/react 那样在微任务中进行,也可能就是在宏任务末尾进行。具体方案没有研究

编辑 (opens new window)
#Angular
上次更新: 2024/09/01, 23:56:56
Angular1.x学习
React Hooks 实现原理

← Angular1.x学习 React Hooks 实现原理→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式