vue3源码分析——解密nextTick的实现

Posted 2022-07-09 twinkle||cll

引言

<<往期回顾>>

1. vue3源码分析——实现组件通信provide,inject

2. vue3源码分析——实现createRenderer，增加runtime-test

3. vue3源码分析——实现element属性更新，child更新

4. vue3源码分析——手写diff算法

5. vue3源码分析——实现组件更新

vue是怎么更新UI，是同步还是异步呢？🤔🤔🤔，本期就来实现下vue3异步更新UI，并且实现nextTick这个api,所有的代码实现代码，请查看仓库

正文

假设同步

如果vue3是同步来更新UI界面，会发生什么呢？请思考下面的列子：

 test('存在的问题, vue更新ui界面是异步的', () => 
    let clickMethod;
    const app = createApp(
      name: 'App',
      setup() 
        const count = ref(0)
        clickMethod = () => 
          for (let i = 0; i < 100; i++) 
            count.value++
          
        
        return 
          count,
        
      ,
      render() 
        return h('div', , this.count)
      
    )
    const appDoc = document.querySelector('#app')
    app.mount(appDoc)
    expect(appDoc?.innerhtml).toBe('<div>0</div>')

    clickMethod()
    expect(appDoc?.innerHTML).toBe('<div>100div>')
  )

在上面的测试用例当中，对外抛出一个方法，方法内有一个循环，执行响应式数据count变化100次。在这个测试用例本身是可以通过的，但是打debugger就会发现，更新流程走了100次，并且dom操作也是走了100次。这样的结果肯定是不满意的，更新走100次没有问题，但是dom操作了100次，那肯定就有点浪费性能了😶‍🌫️😶‍🌫️😶‍🌫️。

attention!!!

看到这里的同志，可以思考下，怎么做优化?

优化性能

上面说到了，100次更新dom浪费性能，这里就来解决下。在解决之前，需要理解一个概念，js的事件循环（Event Loop）

js事件循环

来一张网上经典的图，意思是说所有的js任务会区分同步任务还是异步任务，同步任务直接放入主进程直接执行调用，但是异步任务是需要等带所有的同步任务完成后，才来逐个执行异步任务。,然而异步任务也分为宏任务（macrotask） 和 微任务(microtask) ,他们都有独立的任务队列。

• 宏任务主要包含：<script>( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)等\\
• 微任务主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)等

这里又有一个争议的点，宏任务和微任务哪个先执行的问题？

请看下面的两个列子：

不服的battle请举例😉😉😉

这里在给一张图，不清楚的可以看下

详情请查看 重温js—— 事件循环

优化代码

还记得effect的第二个参数options么？里面可以传递一个scheduler函数，如果存在scheduler的话，那么在run的时候就会执行这个函数,那么优化入口就找到了，就是在更新中使用effect的地方，也就是setupRenderEffect（）

思路

在effect里面传入第二个参数，scheduler函数里面需要维护一个队列，方便保存当前的effect的runner函数，然后把runner函数放入微任务中进行执行就ok了。

当然，在放入微任务之前，维护的队列中需要判断runner是否重复，重复只添加一次，然后取除队列中的第一项放入微队列中执行

编码

通过上面的思路，可以写出下面的代码

// 定义一个队列
const queue = []；

export function queueJob(job)
    // 不存在队列中，则放入 
     if(!queue.includes(job))
         queue.push(job)
     
     
     // 放入微队列中执行
     Promise.reslove.then(() => 
         let jobFn
         // 取出队列中的第一个effect进行执行
         while(jobFn = queue.shift())
            jobFn && jobFn()
         
     )

是不是很简单哇，有了这个之后，那么vue3在更新视图就会放入微队列当中了

其中放入微队列并执行的代码就是实现nextTick的核心。

实现nextTick

在vue3源码中就是使用Promise的方式来实现nextTick()的，那么在需要使用nextTick的地方，直接使用Promise.resolve.then() 也可以实现nextTick的功能哦！

分析

nextTick的功能是：获取页面更新之后的数据

UI界面是在微任务中来进行更新的,那么我在需要写逻辑的地方再来一个微任务是不是一定就排在更新之后的任务后面了呢？答案是肯定的。那么你可以写出这样的代码

 let clickMethod;
    const app = createApp(
      name: 'App',
      setup() 
        const count = ref(0)
        clickMethod = () => 
          for (let i = 0; i < 100; i++) 
            count.value++
          
        
        return 
          count,
        
      ,
      render() 
        return h('div', , this.count)
      
    )
    const appDoc = document.querySelector('#app')
    app.mount(appDoc)
    expect(appDoc?.innerHTML).toBe('<div>0</div>')

    clickMethod()
    expect(appDoc?.innerHTML).not.toBe('<div>100</div>')
    
    // 需要放入微任务当中,代替了nextTick方法
    Promise.resolve().then(() => 
      expect(appDoc?.innerHTML).toBe('<div>100</div>')
    )

编码

有了上面的基础，需要实现nextTick是不是很简单哇！

// 定义一个队列
const queue = []；

export function queueJob(job)
    // 不存在队列中，则放入 
     if(!queue.includes(job))
         queue.push(job)
     
     
     // 放入微队列中执行
    nextTick(() => 
         let jobFn
         // 取出队列中的第一个effect进行执行
         while(jobFn = queue.shift())
            jobFn && jobFn()
         
    )


export function nextTick(fn)
  return fn ? Promise.reslove.then(fn) : Promise.reslove()

此处代码为最容易理解的状态，需要看优化好的代码，请查看

总结

本期主要实现了nextTick()，通过nextTick看到了vue更新dom的方式是异步的。并且在这种方式的基础之上，需要使用到js的事件循环，在事件循环中微任务比宏任务的优先级更高。所以nextTick使用的是微任务方式来更新dom 。 看似不到20行的代码，里面却包含着这么多知识点，只能说大佬就是大佬，灵活运用👍👍👍