美文网首页
vue中nextTick的原理

vue中nextTick的原理

作者: sun_hl | 来源:发表于2021-09-02 15:05 被阅读0次

由于Vue DOM更新是异步执行的,即修改数据时,视图不会立即更新,而是会监听数据变化,并缓存在同一事件循环中,等同一数据循环中的所有数据变化完成之后,再统一进行视图更新。为了确保得到更新后的DOM,所以设置了 Vue.nextTick()方法。

什么是Vue.nextTick()

是Vue的核心方法之一,官方文档解释如下:

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。

源码浅析

nextTick 源码主要分为两块:能力检测和根据能力检测以不同方式执行回调队列。

1、flushCallbacks () // 该函数是对callbacks进行遍历,然后执行相应的回调函数
2、timerFunc // 异步执行函数 用于异步延迟调用 flushCallbacks 函数
延迟调用优先级如下:
Promise > MutationObserver > setImmediate > setTimeout

// 使用 MicroTask 的标识符,这里是因为火狐在<=53时 无法触发微任务
export let isUsingMicroTask = false 

 // 用来存储所有需要执行的回调函数
const callbacks = []

// 用来标志是否正在执行回调函数
let pending = false 

// 对callbacks进行遍历,然后执行相应的回调函数
function flushCallbacks () {
    pending = false
    // 这里拷贝的原因是:
    // 有的cb 执行过程中又会往callbacks中加入内容
    // 比如 $nextTick的回调函数里还有$nextTick
    // 后者的应该放到下一轮的nextTick 中执行
    // 所以拷贝一份当前的,遍历执行完当前的即可,避免无休止的执行下去
    const copies = callbcks.slice(0)
    callbacks.length = 0
    for(let i = 0; i < copies.length; i++) {
        copies[i]()
    }
}

let timerFunc // 异步执行函数 用于异步延迟调用 flushCallbacks 函数

// 优先使用 Promise
if(typeof Promise !== 'undefined' && isNative(Promise)) {
    const p = Promise.resolve()
    timerFunc = () => {
        p.then(flushCallbacks)
        
        // IOS 的UIWebView, Promise.then 回调被推入 microTask 队列,但是队列可能不会如期执行
        // 因此,添加一个空计时器强制执行 microTask
        if(isIOS) setTimeout(noop)
    }
    isUsingMicroTask = true
} else if(!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) || MutationObserver.toString === '[object MutationObserverConstructor]')) {
// 当 原生Promise 不可用时,使用 原生MutationObserver
    let counter = 1
    // 创建MO实例,监听到DOM变动后会执行回调flushCallbacks
    const observer = new MutationObserver(flushCallbacks)
    const textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
        characterData: true // 设置true 表示观察目标的改变
    })
    
    // 每次执行timerFunc 都会让文本节点的内容在 0/1之间切换
    // 切换之后将新值复制到 MO 观测的文本节点上
    // 节点内容变化会触发回调
    timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter) // 触发回调
    }
    isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }
} else {
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}

3、nextTick(cb? Function, ctx: Object) {}
next-tick.js 对外暴露了nextTick这一个参数,所以每次调用Vue.nextTick时会执行:

  • 把传入的回调函数cb压入callbacks数组
  • 执行timerFunc函数,延迟调用 flushCallbacks 函数
  • 遍历执行 callbacks 数组中的所有函数,这里的 callbacks 没有直接在 nextTick 中执行回调函数的原因是保证在同一个 tick 内多次执行nextTick,不会开启多个异步任务,而是把这些异步任务都压成一个同步任务,在下一个 tick 执行完毕。
export function nextTick(cb? Function, ctx: Object) {
    let _resolve
    // cb 回调函数会统一处理压入callbacks数组
    callbacks.push(() => {
        if(cb) {
            try {
                cb.call(ctx)
            } catch(e) {
                handleError(e, ctx, 'nextTick')
            }
        } else if (_resolve) {
            _resolve(ctx)
        }
    })
    
    // pending 为false 说明本轮事件循环中没有执行过timerFunc()
    if(!pending) {
        pending = true
        timerFunc()
    }
    
    // 当不传入 cb 参数时,提供一个promise化的调用 
    // 如nextTick().then(() => {})
    // 当_resolve执行时,就会跳转到then逻辑中
    if(!cb && typeof Promise !== 'undefined') {
        return new Promise(resolve => {
            _resolve = resolve
        })
    }
}

详见参考以下链接:
https://blog.csdn.net/qq_38290251/article/details/107550899
https://zhuanlan.zhihu.com/p/174396758
https://blog.csdn.net/chenzeze0707/article/details/90083725

相关文章

  • 深入理解nextTick()

    这篇文章主要讲一下nextTick()的使用,event loop,和vue中nextTick()的原理,以及在使...

  • Vue中$nextTick原理和setTimeOut运行机制

    Vue中$nextTick 原理 Vue 在内部对异步队列尝试使用原生的 Promise.then、Mutatio...

  • vue使用this.$nextTick()函数

    Vue.nextTick Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新 Vue 实现响应...

  • 关于vue常见的题目

    1. 简述vue响应式原理 2. 计算属性的原理 3. Vue.nextTick 原理 用法: 理解:nextTi...

  • nextTick实现原理

    vue的nextTick方法的实现原理:vue用异步队列的方式来控制DOM更新和nextTick回调先后执行mic...

  • vue原理与开发逻辑

    1、vue中的$nextTick()的用法和原理 vue的DOM更新是异步的,当数据更新了,再dom中渲染后,自动...

  • vue nextTick原理

    vue nextTick原理 前面谈到了vue2.x的响应式原理[https://juejin.im/post/6...

  • Vue.js中的this.$nextTick()

    Vue中的nextTick涉及到Vue中DOM的异步更新 this.$nextTick()将回调延迟到下次 DOM...

  • VUE中nextTick实现原理

    在vue中有nextTick这个API,官方解释,它可以在DOM更新完毕之后执行一个回调。一般使用 一般来说,在对...

  • $nextTick 的作用

    有同学在看 Vue 官方文档时,对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作...

网友评论

      本文标题:vue中nextTick的原理

      本文链接:https://www.haomeiwen.com/subject/qnkkwltx.html