中小学网站建设,软件开发培训思摩特,十大免费网页制作平台,捷克网站后缀简言
nextTick是Vue等待下一次 DOM 更新刷新的工具方法。 当我们更新dom数据后#xff0c;需要在后面立即获取更新后的页面数据#xff0c;就可以使用它。
nextTick
当你在 Vue 中更改响应式状态时#xff0c;最终的 DOM 更新并不是同步生效的#xff0c;而是由 Vue 将它…简言
nextTick是Vue等待下一次 DOM 更新刷新的工具方法。 当我们更新dom数据后需要在后面立即获取更新后的页面数据就可以使用它。
nextTick
当你在 Vue 中更改响应式状态时最终的 DOM 更新并不是同步生效的而是由 Vue 将它们缓存在一个队列中直到下一个“tick”才一起执行。这样是为了确保每个组件无论发生多少状态改变都仅执行一次更新。
nextTick() 可以在状态改变后立即使用以等待 DOM 更新完成。你可以传递一个回调函数作为参数或者 await 返回的 Promise。 注意
nextTick是vue实例里的方法要在vue组件里使用。异步方法。
script
import { nextTick } from vueexport default {data() {return {count: 0}},methods: {async increment() {this.count// DOM 还未更新console.log(document.getElementById(counter).textContent) // 0await nextTick()// DOM 此时已经更新console.log(document.getElementById(counter).textContent) // 1}}
}
/scripttemplatebutton idcounter clickincrement{{ count }}/button
/template结语
nextTick涉及到js的事件循环机制通过setTimeout(fn,0)可以实现它或者使用比较新的专用事件处理api MutationObserver 。 nextTick是一个较为重要的方法恰当的使用它可以解决问题和提高性能。
