Vue异步更新DOM及$nextTick执行机制解读
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编写一个可以快进后退的跑马灯组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了使用vue控制元素显示隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue CLI3搭建的项目中路径相关问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue+element下日期组件momentjs转换赋值问题解决
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下2024-02-02
本篇文章主要介绍了vue.js实例todoList项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了vue3组合式API实现todo列表,下面用组合式 API的写法,实现一个可新增、删除的todo列表效果,需要的朋友可以参考下2024-08-08
在 vue 里我们可以通过全局事件总线来实现任意组件之间通信，它的原理是给 Vue 的原型对象上面添加一个属性。这样的话我所有组件的都可以访问到这个属性，然后可以通过这个属性来访问其他组件给这个属性上面绑定的一些方法，从而去传递数据2022-08-08
如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value，如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value，这篇文章主要介绍了vue3 中ref和reactive的区别,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了谈谈我在vue-cli3中用预渲染遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要为大家详细介绍了vue使用拖拽方式创建结构树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论