vue核心面试题（为什么vue采用异步渲染）

亦凉 2023-02-20 13:45 262阅读 0赞

### 前言： ###

因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图。

vue是组件级更新，当前组件里的数据变了，它就会去更新这个组件。当数据更改一次组件就要重新渲染一次，性能不高，为了防止数据一更新就更新组件，所以做了个异步更新渲染。（核心的方法就是nextTick）

### 原理： ###

当数据变化后会调用notify方法，将watcher遍历，调用update方法通知watcher进行更新，这时候watcher并不会立即去执行，在update中会调用queueWatcher方法将watcher放到了一个队列里，在queueWatcher会根据watcher的进行去重，多个属性依赖一个watcher，如果队列中没有该watcher就会将该watcher添加到队列中，然后通过nextTick异步执行flushSchedulerQueue方法刷新watcher队列。flushSchedulerQueue中开始会触发一个before的方法，其实就是beforeUpdate，然后watcher.run() 才开始真正执行watcher，执行完页面就渲染完成啦，更新完成后会调用updated钩子。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70][]

### 源码： ###

1.notify

notify () { // 通知存储的依赖更新
        const subs = this.subs.slice()
        if (process.env.NODE_ENV !== 'production' && !config.async) {
          subs.sort((a, b) => a.id - b.id)
        }
        // 循环watcher，发布订阅模式
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update() // 调用watcher中的update方法
        }
      }

dep中存储的就是watcher，每个属性一个dep

2.update

update () {
        if (this.lazy) { // 计算属性
          this.dirty = true
        } else if (this.sync) { // 同步watcher
          this.run()
        } else {
          queueWatcher(this) // 将watcher放入队列，this就是当前的watcher
        }
      }

3.queueWatcher

export function queueWatcher (watcher: Watcher) {
      const id = watcher.id // 过滤watcher，每个watcher有一个id，多个属性依赖同一个watcher
      if (has[id] == null) { // 如果没有就会添加进去
        has[id] = true
        if (!flushing) {
          queue.push(watcher) // 并且将watcher放到队列中去
        } else {
          let i = queue.length - 1
          while (i > index && queue[i].id > watcher.id) {
            i--
          }
          queue.splice(i + 1, 0, watcher)
        }
        if (!waiting) {
          waiting = true
    
          if (process.env.NODE_ENV !== 'production' && !config.async) {
            flushSchedulerQueue() // 会做一个清空queue的操作
            return
          }
          nextTick(flushSchedulerQueue) // 在下一个tick中刷新watcher队列
        }
      }
    }

4.flushSchedulerQueue

function flushSchedulerQueue () {
      currentFlushTimestamp = getNow()
      flushing = true
      let watcher, id
      queue.sort((a, b) => a.id - b.id)
      for (index = 0; index < queue.length; index++) {
        watcher = queue[index]
        if (watcher.before) {
          watcher.before() // 触发一个before方法
        }
        id = watcher.id
        has[id] = null
        watcher.run() // 开始执行watcher，执行完页面就渲染完成啦
        if (process.env.NODE_ENV !== 'production' && has[id] != null) {
          circular[id] = (circular[id] || 0) + 1
          if (circular[id] > MAX_UPDATE_COUNT) {
            warn(
              'You may have an infinite update loop ' + (
                watcher.user
                  ? `in watcher with expression "${watcher.expression}"`
                  : `in a component render function.`
              ),
              watcher.vm
            )
            break
          }
        }
      }
      const activatedQueue = activatedChildren.slice()
      const updatedQueue = queue.slice()
      resetSchedulerState()
      callActivatedHooks(activatedQueue)
      callUpdatedHooks(updatedQueue) // 更新完成后会调用updated钩子
      if (devtools && config.devtools) {
        devtools.emit('flush')
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200627185812834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2,size_16,color_FFFFFF,t_70