Vue2面试考点之$nextTick原理解析

nextTick原理

平时在获取真实DOM的时候获取不到最新的DOM元素，使用$nextTick就可以

为什么$nextTick就可以获取到最新的DOM元素?

带着以上问题，来解析nextTick的原理

为什么获取不到最新的DOM元素

因为Vue修改视图是异步执行的，这也是为了优化性能，在我们修改data中的数据时，Vue内部监听到依赖数据发生了改变，通过dep通知组件的watcher执行视图更新，每一次视图更新都需要重新生成vnode再进行新旧vnode比对，生成DOM元素挂载到页面上，这一轮操作是非常消耗性能的,所以Vue内部会把页面更新watcher推入到一个队列中，并加入了节流方法，当同步代码执行完了之后才会把队列中的watcher拿出来遍历更新视图，我们在使用this.$refs获取DOM的时候是同步代码，其实DOM还没有更新，所以是获取不到的

为什么使用$nextTick就可以获取到最新DOM

Vue的视图更新是异步执行的，使用的就是nextTick,这也是能获取到最新DOM的原因，在Vue内部有一个nextTick函数，他也是使用队列去处理回调函数，并不是调用后就马上执行，首先是推入到一个队列中，当所有的同步代码执行完的时候再通过循环取出调用，接下来可以通过代码了解

let callback = []
let pending = false
let timerFunc
function flush() {
  callback.forEach((cb) => cb())
  pending = false
  callback = []
}
// 处理兼容问题
if (Promise) {
  timerFunc = () => {
    Promise.resolve().then(flush)
  }
} else if (MutationObserver) {
  let observe = new MutationObserver(flush)
  let textNode = document.createTextNode(1)
  observe.observe(textNode, {
    characterData: true,
  })
  timerFunc = () => {
    textNode.textContent = 2
  }
} else if (setImmediate) {
  // ie浏览器支持得定时器
  timerFunc = () => {
    setImmediate(flush)
  }
}
export function nextTick(cb) {
  callback.push(cb)
  // Promise.then
  if (!pending) {
    console.log('执行了')
    timerFunc() // 这个方法就是异步方法
    pending = true
  }
}
 

1.定义一个callback数组，每次调用nextTick就会把回调函数push到callback数组中，因为callback.push是同步代码，timerFunc是异步代码，所以执行完所有push后才会调用timerFunc

2.那么视图更新和获取DOM的流程是怎么样的呢

通过伪代码来解释

data(){
    return {
        name: 'zs',
        list: [1,2,3]
    }
}
this.name = 'ls'
this.list.push(4)
const fn = () => {
  this.$el.innerHTML // 获取最新DOM
}
this.$nextTick(fn)

this.name和this.list修改了2个数据，会触发两次视图更新，这个时候就会把watcher推入到队列中，下面调用了$nextTick获取DOM，nextTick中的fn函数也会推入到队列中，这个时候的数组是这样的[watcher,fn]通过循环调用，先执行视图更新，后获取DOM就可以获取到最新DOM了

到此这篇关于Vue2面试考点之$nextTick原理解析的文章就介绍到这了,更多相关Vue2 $nextTick内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！