【面试题】Vue2的$nextTick原理解析_vue2 next

1. 平时在获取真实DOM的时候获取不到最新的DOM元素，使用$nextTick就可以
2. 为什么$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 = () => {


### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。



级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。



![html5](https://img-blog.csdnimg.cn/img_convert/bdb50e07b3815c29c96609304b2aeb36.webp?x-oss-process=image/format,png)