vue中数据更新引起的dom变化为什么会使用异步更新,同步代码操作dom浏览器不也是在eventloop最后阶段一起渲染吗?

vue中数据更新引起的dom变化为什么会使用异步更新,同步代码操作dom浏览器不也是在eventloop最后阶段一起渲染吗?
这是这个问题的分解

回答:

export default {
    data () {
        return {
            test: 0
        };
    },
    mounted () {
      for(let i = 0; i < 1000; i++) {
        this.test++;
      }
    }
}

现在有这样的一种情况,mounted的时候test的值会被++循环执行1000次。 每次++时,都会根据响应式触发setter->Dep->Watcher->update->patch。 如果这时候没有异步更新视图,那么每次++都会直接操作DOM更新视图,这是非常消耗性能的。 所以Vue.js实现了一个queue队列,在下一个tick的时候会统一执行queue中Watcher的run。同时,拥有相同id的Watcher不会被重复加入到该queue中去,所以不会执行1000次Watcher的run。最终更新视图只会直接将test对应的DOM的0变成1000。 保证更新视图操作DOM的动作是在当前栈执行完以后下一个tick的时候调用,大大优化了性能。
原文地址:https://github.com/answershut…

回答:

你给一个dom设置了高度,再获取高度,浏览器会怎样做

回答:

vue 使用异步更新,本质上是对 虚拟dom 的一种更新优化。
虚拟dom 本质就是拿 Javascript对象 模拟 dom树。如果是同步多次的更新,而且如果每一次 data 数据更新对这个对象影响巨大,势必会带来不必要的多余计算,只要最后最新的那一次更新不就好了嘛~

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注