关于vue组件的更新机制 resize() callResize()
组件的更新机制 resize() callResize()
假设有一段代码，通过isCollapse改变触发ref的子组件child触发方法resize()，借着触发callResize()方法。
这是vue组件的更新机制。
子组件是child，父组件是整个界面 ，在父组件上任意触发监听，调用方法resize()；
resize()调用callResize()，callResize()把下面的3个方法的resize()一次调用。
循环遍历 父触发，父亲告诉子 resize 子告诉孙 resize。没有孙子，就调用停止。
想一个树形结构，导航菜单，点击导航菜单，切换对应界面。保证每个节点都跟着刷新。
就是说，父组件更新了，它的子组件，孙组件都要更新。子组件变化了，它引用的所有组件都要更新。
举个例子
当GlobalHeader中的logo属性发生变化，那么第二张图的这些组件都要更新。
异步更新机制是如何实现的
Vue的异步更新机制的核心是利用了浏览器的异步任务队列来实现的，首选微任务队列，宏任务队列次之。
当响应式数据更新后，会调用 dep.notify 方法，通知 dep 中收集的 watcher 去执行 update方法，watcher.update 将 watcher 自己放入一个 watcher 队列（全局的 queue 数组）。
然后通过 nextTick 方法将一个刷新 watcher 队列的方法（flushSchedulerQueue）放入一个全局的callbacks 数组中。
如果此时浏览器的异步任务队列中没有一个叫 flushCallbacks 的函数，则执行 timerFunc 函数，将 flushCallbacks 函数放入异步任务队列。如果异步任务队列中已经存在 flushCallbacks 函数，等待其执行完成以后再放入下一个 flushCallbacks 函数。 flushCallbacks 函数负责执行 callbacks数组中的所有 flushSchedulerQueue 函数。
flushSchedulerQueue 函数负责刷新 watcher 队列，即执行 queue 数组中每一个 watcher 的 run 方法，从而进入更新阶段，比如执行组件更新函数或者执行用户 watch 的回调函数。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 父子组件共用mixins的注意点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
解决Vite无法分析出动态import的类型,控制台出警告的问题
这篇文章主要介绍了解决Vite无法分析出动态import的类型,控制台出警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue 生成gzip压缩包部署到nginx服务器，如果我们把web网站资源进行gzip压缩后进行传输给浏览器，这样就能加快网站资源的加载速度，这篇文章主要介绍了vue生成gzip压缩包部署到nginx,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue项目实现webpack配置代理,解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue的移动端多图上传插件vue-easy-uploader的示例代码
这篇文章主要介绍了Vue的移动端多图上传插件vue-easy-uploader的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
在 Vue.js 的项目中，如果项目结构简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式，如果是大型项目，很多时候都需要在子组件之间传递数据，使用vue的状态管理工具vuex很好的解决2018-08-08
使用ElementUI el-upload实现一次性上传多个文件
在日常的前端开发中,文件上传是一个非常常见的需求,尤其是在用户需要一次性上传多个文件的场景下,ElementUI作为一款非常优秀的Vue.js 2.0组件库,为我们提供了丰富的UI组件,本文介绍了如何使用ElementUI el-upload实现一次性上传多个文件,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了如何在Vue中使用CleaveJS格式化你的输入内容，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
在现代Web开发中,数据安全是一个不可忽视的重要环节,Vue.js作为一个流行的前端框架,不仅提供了强大的数据绑定和组件化功能,还支持与各种后端服务的集成,本文将探讨如何在Vue应用中使用MD5算法来加密数据,从而提升应用的安全性,需要的朋友可以参考下2024-10-10
这篇文章主要为大家详细介绍了如何使用Vue3实现一个简单的输入框,可以实现输入文字,添加表情等功能,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
最新评论