前端 Vue2.x 响应式原理 和 Eventloop异步原理
2021-09-09 16:42:36 19 举报
Vue2.x 响应式原理是通过数据劫持结合发布者-订阅者模式实现的。当数据发生变化时,会触发对应的更新函数,从而更新视图。而 Eventloop 异步原理是指 JavaScript 采用单线程模型来执行代码,通过事件队列、微任务队列和宏任务队列来实现异步操作的调度。当主线程空闲时,从微任务队列中取出一个任务执行;当微任务队列为空时,从宏任务队列中取出一个任务执行。这样可以避免阻塞主线程,提高程序的执行效率。
作者其他创作
大纲/内容
初始化视图
取出一个异步宏任务执行
b()
解析html模板
观察者劫持监听所有属性
异步微任务队列
事件触发线程eventloop轮询处理线程
将回调放入异步微任务中
c()
a()
Eventloop
Update
宏任务
等待时间到达或者被触发时,将方法的回调放入到宏任务中
new MVVM
添加订阅者
通知变化
Wather订阅者
订阅数据变化,绑定更新函数
Dep订阅器
Observer
前端 Vue2.x 响应式原理
异步宏任务队列
JS引擎线线程执行栈包含同步代码,异步代码
清空异步微任务队列
GUI渲染
Complie
更新视图
0 条评论
下一页