本篇内容介绍了“Vue异步更新DOM及$nextTick执行机制源码分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Vue异步更新DOM策
本篇内容介绍了“Vue异步更新DOM及$nextTick执行机制源码分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
我们知道，Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环 “tick" 中，Vue 刷新队列并执行实际（已去重的）工作。
$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>因为如果同步进行DOM更新，则每次对响应式数据进行修改就都会触发setter -> 通知watcher -> 触发re-render -> 生成new vnode(vdom) -> patch（更新真实DOM）。
如果每次修改数据都会走一遍这个流程是非常消耗性能的，所以使用异步更新 DOM 的策略，先对数据修改进行整合，再使用最终的整合结果一次性对 DOM 进行更新。
<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>“Vue异步更新DOM及$nextTick执行机制源码分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
--结束END--
本文标题: Vue异步更新DOM及$nextTick执行机制源码分析
本文链接: https://www.lsjlt.com/news/353117.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
2024-05-21
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0