Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。
例如，当你设置 vm.someData = ‘new value’，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

在根示例中

<div id="example">{{message}}</div>

var vm = new Vue({el: '#example',data: {message: '123'}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {vm.$el.textContent === 'new message' // true
})

组件中

Vue.component('example', {template: '<span>{{ message }}</span>',data: function () {return {message: '未更新'}},methods: {updateMessage: function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'this.$nextTick(function () {console.log(this.$el.textContent) // => '已更新'})}}
})

因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2017 async/await 语法完成相同的事情：

methods: {updateMessage: async function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'await this.$nextTick()console.log(this.$el.textContent) // => '已更新'}
}

vue 异步更新队列 Vue.nextTick(callback)相关推荐

vue如何让一句代码只执行一次_lt;Vue 源码笔记系列4gt;异步更新队列与$nextTick...
1. 前言原文发布在语雀: <Vue 源码笔记系列4>异步更新队列与$nextTick · 语雀www.yuque.com 上一章我们讲到了修改数据是如何触发渲染函数的观察者,最终调用 ...
“约见”面试官系列之常见面试题第三十九篇之异步更新队列-$nextTick（建议收藏）
目录一,前言二,什么是异步更新队列三,使用异步更新队列四,结尾一,前言这一篇介绍有关异步更新队列的知识,通过异步更新队列的学习和研究能够更好的理解Vue的更新机制二,什么是异步更新队列 ...
批量异步更新策略及 nextTick 原理
批量异步更新策略及 nextTick 原理为什么要异步更新通过前面几个章节我们介绍,相信大家已经明白了 Vue.js 是如何在我们修改 data 中的数据后修改视图了.简单回顾一下,这里面其实就是 ...
vue 多个回调_Vue 进阶面试必问，异步更新机制和 nextTick 原理
vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在下借这个机会从大家的文章和讨论中汲取了一 ...
【Vue面试题】说说nextTick的使用和原理？
分析这道题及考察使用,有考察原理,nextTick在开发过程中应用的也较少,原理上和vue异步更新有密切关系,对于面试者考查很有区分度,如果能够很好回答此题,对面试效果有极大帮助. 答题思路 nex ...
渲染篇四：千方百计——Event Loop 与异步更新策略
千方百计--Event Loop 与异步更新策略 Vue 和 React 都实现了异步更新策略.虽然实现的方式不尽相同,但都达到了减少 DOM 操作.避免过度渲染的目的.通过研究框架的运行机制,其设计 ...
echars vue 添加数据没更新_vue在使用ECharts时的异步更新和数据加载详解
前言最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:下面话不多说了,来一起看 ...
深入理解 vue DOM 更新时机
vue3 官方文档中对 DOM 更新时机的解释是当你更改响应式状态后,DOM 也会自动更新.然而,你得注意 DOM 的更新并不是同步的.相反,Vue 将缓冲它们直到更新周期的 "下个时机 ...
vue异步引入百度地图API
看了下官网上的方法,是采用原生的写法,不适用于vue 异步引入的好处是baiduAK可以方便管理 import { baiduAk } from '@/settings'export function ...
易忘知识点整理（持续更新）——VUE使用
1. 复习组件中自定义v-model指令使用: 组件中v-model最基本的用法:在父组件给子组件绑定v-model的时候,相当于绑定了自定义事件@input,v-model=后面传递的值,是子组件在 ...

vue 异步更新队列 Vue.nextTick(callback)

在根示例中

组件中

vue 异步更新队列 Vue.nextTick(callback)相关推荐

最新文章

热门文章