vue之理解异步更新 --- nextTick
默认情况下，vue中DOM的更新是异步执行的，理解这一点非常重要。
当侦测到数据变化时，Vue会打开一个队列，然后把在同一个事件循环（event loop）当中观察到的数据变化的watcher推送进入这个队列，加入一个watcher在一个事件循环中被触发了多次，它只会被推送到队列中一次， 然后在进入下一次的事件循环时，Vue会清空队列并进行必要的DOM更新，。在内部，Vue 会使用 MutationObserver 来实现队列的异步处理，如果不支持则会回退到 setTimeout(fn, 0)。
举例来说：
当你设置 vm.someDate = ' new value ' 时， DOM并不会马上更新，而是在异步队列中被清楚， 也就是在下一个事件循环中开始执行更新， 如果你希望通过更新的DOM状态去做某些事情，那么就必须留意这个细节， 尽管vue.js鼓励开发者用“数据驱动”的方式想问题，避免直接操作DOM，但是有时候你可能是想要使用某个熟悉的jQuery插件这种情况该怎么办呢？
你可以在数据改变之后，理解调用 Vue.nextTick(callback)，并把你要做的事情放在回调函数中。 当Vue.nextTick的回调函数执行时，DOM就是已经更新后的状态了。
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
</head>
<body>
<div id="example">{{msg}}</div> <script>
var vm = new Vue({
el: "#example",
data: {
msg: "hello"
}
});
vm.msg = "zzw"
alert(vm.$el.textContent === "zzw");
Vue.nextTick(function () {
alert(vm.$el.textContent === "zzw");
});
</script>
</body>
</html>
通过这个例子就可以很好的理解了。
除此之外，也有一个实例方法 vm.$nextTick() ，这个方法和全局的Vue.nextTick 的功能一样，但是更方便在组件内部使用，因为它不需要全局的Vue变量， 另外它的回调函数中的 this上下文 会自动绑定到它的Vue实例中。
Vue.component('example', {
template: '<span>{{msg}}</span>',
data: function () {
return {
msg: 'not updated'
}
},
methods: {
updateMessage: function () {
this.msg = 'updated'
console.log(this.$el.textContent) // => 'not updated'
this.$nextTick(function () {
console.log(this.$el.textContent) // => 'updated'
})
}
}
})
参考文章： 细节与最佳实践
vue之理解异步更新 --- nextTick的更多相关文章
- Vue你不得不知道的异步更新机制和nextTick原理
前言 异步更新是 Vue 核心实现之一,在整体流程中充当着 watcher 更新的调度者这一角色.大部分 watcher 更新都会经过它的处理,在适当时机让更新有序的执行.而 nextTick 作为异 ...
- Vue异步更新机制以及$nextTick原理
相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新 可能你还 ...
- Android 异步更新UI-线程池-Future-Handler实例分析
前言: 我们在开发Android过程中,在处理耗时任务和UI交互的过程中,都会将耗时任务放到子线程处理并刷新. 下面我提出的两个问题,相信大多数开发者都会碰到: 1. 数据经常需要读取更新,并且比较耗 ...
- 【转】从Vue.js源码看异步更新DOM策略及nextTick
在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...
- Vue系列---理解Vue.nextTick使用及源码分析(五)
_ 阅读目录 一. 什么是Vue.nextTick()? 二. Vue.nextTick()方法的应用场景有哪些? 2.1 更改数据后,进行节点DOM操作. 2.2 在created生命周期中进行DO ...
- Vue 源码解读（4）—— 异步更新
前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对 ...
- Vue源码解析之nextTick
Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作 ...
- Vue 中为什么要有nextTick？
摘要:本文将浅析nextTick的作用.使用场景和背后的原理实现,希望对大家有所帮助. 本文分享自华为云社区<Vue 中的 nextTick 有什么作用?>,作者:CoderBin. 一. ...
- Vue数据更新页面没有更新问题总结
Vue数据更新页面没有更新问题总结 1. Vue无法检测实例别创建时不存在于data中的property 原因: 由于Vue会在初始化实例时对property执行getter/setter转化,所以p ...
随机推荐
- 设计模式04： Factory Methord 工厂方法模式（创建型模式）
Factory Methord 工厂方法模式(创建型模式) 从耦合关系谈起耦合关系直接决定着软件面对变化时的行为 -模块与模块之间的紧耦合使得软件面对变化时,相关的模块都要随之变更 -模块与模块之间的 ...
- 20169219 Nmap扫描实验
提交用 namp 对Windows 靶机,SEED靶机,Linux靶机的扫描的命令和结果进行截图 一.首先分析Linux靶机Metasploitable 扫描Metasploitableb靶机 扫描M ...
- U盘安装Ubuntu 12.04成功后系统无法启动的原因及解决办法
想搭建一个Linux开发环境,选择了ubuntu12.04长期支持版,采用u盘安装(Universal-USB-Installer做的启动),发现安装完成之后,拔掉u盘无法启动,插上u盘之后,可以重启 ...
- c#读取数据库内容
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- SOA-WebService
一.创建Web服务方法 在项目上右击选择新建项>>Web服务(ASMX),并命名,如MyWebService.asmx 二.注意事项 所有需要外界调用的方法上端均需增加特性[WebMeth ...
- VSCode提示pylint isnot installed
1.下载所需扩展 在https://www.lfd.uci.edu/~gohlke/pythonlibs/中下载所需扩展,我下载的是:pylint-2.1.1-py2.py3-none-any.whl ...
- day01.1-Python编译器的安装
一. 在Windows环境中安装Python编译器 1. 访问Python官网https://www.python.org,下载适用于Windows环境的相关编译器版本: 2. 点击Pytho ...
- 20165219 2017-2018-2 《Java程序设计》第8周学习总结
20165219 2017-2018-2 <Java程序设计>第8周学习总结 教材学习内容总结 进程与线程 线程是比进程更小的单位:线程间可以共享进程中的某些内存单元 java的多线机制 ...
- 【bzoj4514】: [Sdoi2016]数字配对 图论-费用流
[bzoj4514]: [Sdoi2016]数字配对 好像正常的做法是建二分图? 我的是拆点然后 S->i cap=b[i] cost=0 i'->T cap=b[i] cost=0 然后 ...
- 【转】WinForm时间选择控件（DateTimePicker）如何选择（显示）时分秒
源地址:https://www.cnblogs.com/EvanFan/p/7826160.html 注意:年月日时分秒的大小写格式,如果错了数据就错了,如果能显示当前时间说明设置正确