一个使用nexttick注意的小点

之前用nexttick,一直认为是更新完dom之后做的操作,但是nexttick有个小问题,父组件DOM更新完成后,子组件没有更新完成,调用nexttick操作子组件里的操作.

是行不通的.

案例:做PC聊天,聊天历史记录滑动到底部,外部用el-drawer实现包裹聊天记录,子组件拿到传递的id,监听id的变化,请求历史记录渲染.渲染完成之后,滚动条滚动到底部.

 

bug是:滚动条不能滑动到地步,只能滑动到中间位置.

      // 滚动到最底部
      this.$nextTick(() => {
        let scrollbar = document.getElementById('chat-scrollbar') // 获取对象
        scrollbar.scrollTop = scrollbar.scrollHeight; // 滚动高度
        console.log('scrollTop',scrollbar.scrollTop);//1010
        console.log('scrollHeight',scrollbar.scrollHeight);// 随聊天记录的内容变化
      });

按照道理,scrollTop应该和scrollHeight保持一致,但scrollTop一直为单一的数据.而且1010的高度数据很奇怪

推断:scrollTop被赋值的操作在DOM更新未完成时,进行.

使用

        setTimeout(()=>{

            scrollbar.scrollTop = scrollbar.scrollHeight; // 滚动高度
    
          }, 0);

解决问题,setTimeout是宏任务,在所有父子组件DOM更新之后,进行滚动条的操作.

疑惑:nexttick不是等待DOM更新完成之后才进行的操作吗?

原因:聊天每条记录都有头像,头像的加载是用的el-image组件,做的请求图片的加载,在调用this.nexttick时,其实并未加载完所有图片,是没有加载图片,选中外层记录包裹的dom,打印出结果未包含所有头像图片.

聊天头像不占位,scrollTop的1010是只包含内容的高度.

总结:①nexttick更新DOM并非迭代组件树之后,完成的更新操作,只是更新完父组件的DOM,才进行的操作

②宏任务和微任务