专栏首页小码农学习笔记Vue 面试官问:组件渲染与更新流程
原创

Vue 面试官问:组件渲染与更新流程

组件渲染与更新

Vue 原理的三大模块分别为响应式、vdom 和模板编译,前面已经分别学习过,现在通过总结渲染过程来将它们串起来回顾。

初次渲染过程

  • Step1:解析模板为 render 函数(这步操作或在开发中通过 vue-loader 已完成)
  • Step2:触发响应式,监听 data 属性 getter 和 setter(下一步执行 render 函数可能会用到 getter)
  • Step3:执行 render 函数,生成 vnode,渲染节点 patch(elem, vnode)

更新过程

  • Step1:修改 data,触发 setter(前提是该 data 此前在 getter 中已被监听,即模板中被引用的 data)
  • Step2:重新执行 render 函数,生成 newVnode
  • Step3:更新节点 patch(vnode, newVnode)

其中 vnode 和 newVnode 的最小差异由 patch 的 diff 算法计算。

完整流程图

组件渲染与更新的完整流程图如下所示:

  • 黄色方框为 render 函数(此时模板已经编译完),它会生成 vnode(绿色 Virtual DOM Tree)。
  • 黄色方框在执行 render 时,会触发(Touch)紫色圆圈(Data)里面的 getter。
  • 紫色圆圈(Data)里的 getter 触发时,会收集依赖,模板里哪个变量的 getter 被触发了,就会将相应变量观察起来(蓝色圆圈 Watcher)
  • 一旦修改了 Data,就会通知 Watcher,如果修改的 data 是之前作为依赖被观察的,则重新触发渲染(re-render)。
image.png

文章持续更新,本文 GitHub 前端修炼小册 已经收录,欢迎 Star。如对文章内容有不同见解,欢迎留言交流。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue(MVVM)、React(MVVM)、Angular(MVC)对比

    昨天阿里内推电面一面,面试官了解到项目中用过Vue,就问为什么前端框架使用Vue而不适用其他的框架,当时就懵了。因为只用过Vue,不了解其他两个框架,今天就赶紧...

    lin_zone
  • 化身面试官出 30+ Vue 面试题,超级干货(附答案)

    不知道大伙是不是已经在准备春招面试了呢,准备得咋样了呢,面试的 Vue 复习得怎么样了呢?如果你感觉在 vue 这方面还比较薄弱的话,不如来做一做这套模拟面试吧...

    展菲
  • 让vue-cli初始化后的项目集成支持SSR

    当前 SPA 架构流行的趋势如日中天,但在 SEO 方面好像一直是个痛点,所以众多流行的 mv* 等框架也为此痛点提出了解决方案。 vue 官方提供了快速构...

    奋飛
  • 8分钟为你详解React、Angular、Vue三大框架

    当前世界中,技术发展非常迅速并且变化迅速,开发者需要更多的开发工具来解决不同的问题。本文就对于当下主流的前端开发技术React、Vue、Angular这三个框架...

    极乐君
  • 哔哩哔哩面试官:你可以手写Vue2的响应式原理吗?

    这道题目是面试中相当高频的一道题目了,但凡你简历上有写:“熟练使用Vue并阅读过其部分源码”,那么这道题目十有八九面试官都会去问你。

    前端森林
  • 总结19道出现率高达98.9%的Vuejs面试题

    找了一些在 Vue 方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴。

    苏南
  • 基于Vue-SSR优化方案归纳总结

    ? Vue-SSR相信大家都不陌生,与传统 SPA 相比,服务器端渲染 (SSR) 能够具备更好的SEO,方便搜索引擎爬虫抓取工具可以直接查看完全渲染的页面,...

    腾讯技术工程官方号
  • 使用预渲染提升SPA应用体验

    在目前的前端领域,单页web应用(SPA)已经有了比较高的占有率,比较主流的web框架React、Angular、Vue几乎已经统治了前端市场。

    Javanx
  • 面试官:Vue3有了解过吗?能说说跟Vue2的区别吗?

    「Vue 新版本的理念成型于 2018 年末,当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久,但在这段时期,前端世界已经今昔...

    @超人
  • 「面试题」20+Vue面试题整理

    从镜片的厚度和黄黑相见的格子衬衫我察觉到,面前坐着的这位面试官应该是来者不善。我像以往一样,准备花3分钟的时间进行自我介绍。在此期间,为了避免尴尬,我盯着面试官...

    童欧巴
  • 【React学习笔记】React生命周期梳理(16.X前后两种)

    props属性是从父组件传过来的。当父组件改变了传递给子组件的数据时,子组件内部就会触发该函数。 以下流程发生在子组件内部:子组件内部

    xing.org1^
  • 为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

    Vue.js 是一个用来构建 web UI 的 JavaScript 库,基于 MIT 开源协议。Vue.js 于 2013 年首次分布,但是在接下来的两年内,...

    疯狂的技术宅
  • Vue 2.0 正式发布了!

    时见疏星
  • highlight.js 在 Vue 中使用的一点儿经验

    overtrue
  • 那些Vue开发遇到的坑---响应式系统

    Vue是目前使用较为广泛的前端框架之一。相比React,Vue更容易学习上手。毕竟在React中万物皆JavaScript。这让一些习惯于编写HTML+Java...

    yuanyi928
  • Vue 应用单元测试的策略与实践 03 - Vue 组件单元测试

    2.1 在 Vue 应用的单元测试中,对不同 UI 组件的单元测试有何不同?颗粒度该细到什么样的程度?

    JimmyLv_吕靖
  • Vuejs 3.0 正式版发布!One Piece. 代号:海贼王

    Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本。

    夜尽天明
  • react和vue的渲染流程对比

    Vue.js(2.x)与React的其中最大一个相似之处,就是他们都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字...

    念念不忘
  • 30 道 Vue 面试题,内含详细讲解(上)

    本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度。

    咻咻ing

扫码关注云+社区

领取腾讯云代金券