Vue异步更新DOM及$nextTick执行机制浅析

Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。`$nextTick`会在DOM更新之后被触发，以获取最新DOM节点。因为如果同步进行DOM更新，则每次对响应式数据进行修改就都会`触发setter -> 通知watcher -> 触发re-render -> 生成new vnode(vdom) -> patch（更新真实DOM）`。如果每次修改数据都会走一遍

shangdong2023

6479人浏览 · 2022-04-19 12:23:00

shangdong2023 · 2022-04-19 12:23:00 发布

Vue异步更新DOM策略

我们知道，Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环 “tick" 中，Vue 刷新队列并执行实际（已去重的）工作。

`$nextTick`执行机制

$nextTick会在DOM更新之后被触发，以获取最新DOM节点。

具体来讲：我们使用 JavaScript 进行原生DOM操作时，随着 JavaScript 代码执行会同步进行DOM更新；而使用 Vue 则会异步更新 DOM，会在当前执行栈的最后更新DOM。

对于兼容的浏览器来说，nextTick相当于是微任务，即$nextTick的回调函数是在当前执行栈的所有同步任务执行完毕后再执行，所以nextTick中会得到 DOM 更新后的结果。（不过页面渲染始终是在微任务执行之后才进行的，所以$nextTick回调函数执行时页面还没有进行渲染，回调函数执行时在页面上看不到更新后的结果）

注：浏览器如果不兼容则有几种备选方案，其中setTimeout是最后的一种备选方案，它会将回调函数加入任务队列 task 中，等待执行。

示例详解

JavaScript原生DOM操作（随着JS代码的执行同步进行DOM更新）：

<body>
    <ul id="ul1">
        <li>100</li>
        <li>200</li>
        <li>300</li>
    </ul>

    <script>
        const ul1 = document.getElementById('ul1')
        console.log(ul1.children.length); // 3
        const newLi = document.createElement('li')
        newLi.innerHTML = '400'
        ul1.appendChild(newLi)
        console.log(ul1.children.length); // 4
        Promise.resolve().then(() => {
            alert(ul1.children.length) // 弹出4，此时页面还没有进行渲染（页面还未展示内容）
        })
    </script>
</body>

Vue异步更新DOM：

<template>
  <div id="app">
    <ul ref="ul1">
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="addItem">添加一项</button>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      list: ["a", "b", "c"],
    };
  },
  methods: {
    addItem() {
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);
      this.list.push(`${Date.now()}`);

      // 获取 DOM 元素
      const ulElem = this.$refs.ul1;
      // eslint-disable-next-line
      console.log(ulElem.childNodes.length);// 3

      // 1. 异步进行 dom 更新，$nextTick 待 DOM 更新完再回调
      // 2. dom 更新时会将 data 的修改做整合，多次 data 修改只会更新一次
      this.$nextTick(() => {
        // eslint-disable-next-line
        console.log(ulElem.childNodes.length); // 6

        alert(ulElem.childNodes.length); // 弹出 6，此时页面还没有进行渲染（页面还没展示新添加的3个元素）
      });
    },
  },
};
</script>

Vue异步更新DOM的目的

因为如果同步进行DOM更新，则每次对响应式数据进行修改就都会触发setter -> 通知watcher -> 触发re-render -> 生成new vnode(vdom) -> patch（更新真实DOM）。如果每次修改数据都会走一遍这个流程是非常消耗性能的，所以使用异步更新 DOM 的策略，先对数据修改进行整合，再使用最终的整合结果一次性对 DOM 进行更新。

`$nextTick`应用示例

<template>
  <div>
    <button @click="callbackFun">点我展示输入框并自动获取焦点</button> <br />
    <input type="text" v-show="test" ref="input" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      test: false,
    };
  },
  methods: {
    callbackFun() {
      this.test = true;
      this.$nextTick(function () {
        this.$refs.input.focus(); // 若该行代码不放在 $nextTick 中，则无法展示输入框后自动获取焦点
      });
    },
  },
};
</script>

以上代码，因为将获取焦点的代码放入$nextTick的回调函数中执行，所以点击button后会展示已经获取到焦点的输入框。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^