前言:

深入浅出Vue的部分个人理解。

nextTick接收一个回调函数作为参数,它的作用是将回调函数延迟到下次DOM更新周期之后执行。它与全局方法Vue.nextTick一样,不同的是回调的this自动绑定到调用它的实例上。如果没有提供回调且在支持Promise的环境中,则返回一个Promise。

我们在开发项目时会遇到一种场景,当更新了状态(数据后),需要对新DOM做一些操作,但是这时我们其实获取不到更新后的DOM，因为还没有重新渲染,这个时候我们需要使用nextTick方法。

有一个问题:下次DOM更新周期之后执行,具体指什么时候呢？要搞清楚这个问题,就要先弄明白什么是“下次DOM更新周期”。

? ? 在Vue.js中,当状态发生变化时.watcher会得到通知,然后出发虚拟DOM的渲染流程。而watcher触发渲染这个操作并不是同步的，而是异步的。Vue.js中有一个队列，每当需要渲染时,会将watcher推送到这个队列中，在下一次事件循环中再让watcher触发渲染的流程。

1.为什么vue.js使用异步更新队列

我们知道Vue.js2.0开始使用虚拟DOM进行渲染，变化侦测的通知只发送到组件,组件内用到的所有状态的变化都会通知到同一个watcher,然后虚拟DOM会对这个组件进行比对（“diff”）并更改DOM

也就是说,如果在同一轮事件循环中两个数据发送了变化，那么组件的watcher会收到两份通知,从而进行两次渲染。事实上，并不需要渲染两次，虚拟DOM会对整个组件进行渲染，所以只需要等所有状态都修改完毕后，一次性将整个组件的DOM渲染到最新即可。

2.什么是事件循环

我们都知道Javascript是一门单线程且非阻塞的脚本语言，这意味着JavaScript代码在执行的任何时候只有一个主线程来处理所有任务。

异步任务有两种类型：微任务和宏任务。不同类型的任务会被分配到不同的任务队列中去。

当执行栈中的所有任务都执行完毕后，会去检查微任务队列中是否有事件存在，如果存在，则会依次执行微任务队列中事件对应的回调，直到为空。然后去宏任务队列中取出一个事件，把对应的回调加入到当前执行栈，当执行栈中的所有任务都执行完毕后，检查微任务队列中是否有事件存在。无限重复此过程，就形成了一个无限循环，这个循环就叫事件循环。

属于微任务的事件

Promise.then

Process.nextTick

属于宏任务的事件包含

setTimeout

setInterval

3.$nextTick更新是异步的

(1)当更新了状态(数据后),需要对更新后的DOM进行一些操作,但是获取不到更新后的DOM。使用$nextTick这个api可以解决这个问题。

代码：

<template>
  <div class="">
    <h1 ref="aa">{{ number }}</h1>
    <button @click="fn">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 1,
    };
  },
  name: "",
  methods: {
    fn() {
      this.number++;
      console.log(this.$refs.aa.innerHTML);
    },
  },
};
</script>

<style scoped></style>

view:

可以观察到的是页面上显示的是2，实际获取的是1。

在使用了$nextTick之后。

代码：

<template>
  <div class="">
    <h1 ref="aa">{{ number }}</h1>
    <button @click="fn">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 1,
    };
  },

  name: "",

  methods: {
    fn() {
      this.number++;
      this.$nextTick(() => {
        console.log(this.$refs.aa);
      });
    },
  },
};
</script>

<style scoped></style>

view：

实现了同步。

4.Vue渲染是批量进行渲染的

代码：

<template>
  <div class="">
    <ul ref="aa">
      <li v-for="(itme, index) in arr" :key="index">{{ itme }}</li>
    </ul>
    <button @click="fn">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [10, 20, 30, 40],
    };
  },
  name: "",
  methods: {
    fn() {
      this.arr.push(Math.random());
      this.arr.push(Math.random());
      this.arr.push(Math.random());
      this.$nextTick(() => {
        console.log(this.$refs.aa.childNodes.length);
      });
    },
  },
};
</script>

<style scoped></style>

点击按钮push进去三个随机数,并且获取到更新后的真实的长度。

view：