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 ...
随机推荐
- channel_id以及type_id的内容
- 用ActionBar的ActionProvider的时候报错：cannot be cast to android.view.ActionProvider
在用ActionBar的自定义ActionProvider的时候有时候会遇到以下的报错:
- ECS服务里或者阿里云服务器的二级域名设置方法
我们要实现的效果是,xuxinshuai.abc.com ,具体怎么实现,看下面的流程 第一步:备案域名要有,假如就是www.abc.com 第二步:网站的服务器是IIS的情况下,在部署网站时,需要设 ...
- C# 由范式编程==运算符引发对string内存分配的思考
今天在看C#编程指南时(类型参数的约束http://msdn.microsoft.com/zh-cn/library/d5x73970.aspx)看到一段描述: 在应用 where T : class ...
- SpringMVC+Hibernate 项目开发之二 （STS整合Maven）
为什么用STS不用Eclipse,主要是Eclipse集成Maven把我整疯了,最后估计原因除在网速上了. 其实用了STS以后发现还真比Eclipse好用点. STS本身集成有Maven的,但是默认的 ...
- 基于 cookie 的 node 中间层灰度流程的一些思考
此文已由作者申国骏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 关于灰度发布的意义此处就不进行介绍了,可以先读下这两篇文章 <微服务部署:蓝绿部署.滚动部署.灰 ...
- ubuntu14.04，安装Chrome（谷歌浏览器）
Linux:ubuntu14.04 一直都很喜欢谷歌浏览器,进入linux怎么能没有? 安装方法:谷歌浏览器官方下载的ubuntu版本,下载后点击即可安装. 下载地址:http://download. ...
- Atcoder Grand Contest 031B（DP，思维）
#include<bits/stdc++.h>using namespace std;int a[200007];int b[200007];long long dp[200007];lo ...
- EF进阶篇（三）——上下文
前言 上下文,到底什么是上下文,且听我仔细吹来. 内容 在对EF实体进行关系操作的时候,第一步需要我们创建上下文实例对象,然后根据实体的变化进而通过上下文对该实体进行状态的修改,我的理解就是上下文就是 ...
- Tomcat8.5安装教程
如果第一次安装的用户请耐心阅读哈安装方法1.下载完成后开始安装,第一次安装的用户建议直接点击“next”不选择插件2.可以自行设置账户名以及密码3.非常重要的一步!!!!!!!!!设置jdk安装目录, ...