阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      为何 Vue.js 采用异步渲染?

      问题

      为何Vue采用异步渲染?

      答案

      因为如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染.

      所以为了性能考虑。Vue会在本轮数据更新后,再去异步更新视图!

      有点类似节流的原理

      https://a.axihe.com/focus/vue/04.jpg

      对应源码

      update () {
          /* istanbul ignore else */
          if (this.lazy) {
            this.dirty = true
          } else if (this.sync) {
            this.run()
          } else {
            queueWatcher(this); // 当数据发生变化时会将watcher放到一个队列中批量更新
          }
      }
      export function queueWatcher (watcher: Watcher) {
        const id = watcher.id // 会对相同的watcher进行过滤
        if (has[id] == null) {
          has[id] = true
          if (!flushing) {
            queue.push(watcher)
          } else {
            let i = queue.length - 1
            while (i > index && queue[i].id > watcher.id) {
              i--
            }
            queue.splice(i + 1, 0, watcher)
          }
          // queue the flush
          if (!waiting) {
            waiting = true
      
            if (process.env.NODE_ENV !== 'production' && !config.async) {
              flushSchedulerQueue()
              return
            }
            nextTick(flushSchedulerQueue) // 调用nextTick方法 批量的进行更新
          }
        }
      }
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录