组件渲染和更新的过程_前端培训

发布时间:2021年01月18日作者:atguigu浏览次数:702

初次渲染过程:

  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. 回顾 $nextTick,(以下这是对 $nextTick的回顾: $nextTick: vue 是异步渲染;data改变之后,DOM 不会立刻渲染;$nextTick 会在 DOM 渲染之后被触发,以获取最新 DOM 节点。vue 为何是异步渲染,$nextTick何用?异步渲染(以及合并data修改),以提高渲染性能,$nextTick 在DOM 更新完之后,触发回调。另外,在 vue 中可以通过 ref 获取元素:给元素添加ref属性并设置名称,然后通过 this.$refs.ref 属性名称获取该DOM 元素)总结:1、异步渲染,$nextTick待 DOM 渲染完再回调;2、页面渲染时会将 data 的修改做整合,多次data修改只做一次渲染。
  2. 汇总 data 的修改,一次性更新视图
  3. 减少 DOM 操作次数,提高性能

上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦3层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)