你好世界
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • Vue

    • Vue
    • 选项-数据
    • 选项-生命周期钩子
    • 实例方法-事件
    • 实例方法-生命周期
    • 指令
    • 模板编译
    • 渲染和更新
    • VueRouter
  • React

    • React
    • 环境构建
    • HOC开发模式
    • Hook
    • Redux
    • Nextjs 文档

渲染和更新

图片

初次渲染过程

  1. 解析模板为 render 函数(一般在开发环境已完成,vue-loader)
  2. 触发响应式,监听 data 属性 getter setter
  3. 执行 render 函数,生成 vnode, patch(elem, vnode)

更新过程

  1. 修改 data, 触发 setter(此前在 getter 中已被监听)
  2. 重新执行 render 函数,生成 newVnode
  3. patch(vnode, newVNode)

异步渲染

  1. 汇总 data 的修改,一次性更新视图
  2. 减少 DOM 操作次数,提高性能
  3. 使用 $nextTick 监听渲染回调
最后更新时间: 3/15/22, 8:15 PM
贡献者: DESKTOP-ER5718D\zt
Prev
模板编译
Next
VueRouter