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 ...
随机推荐
- 三解炸弹人——DFS
原创 枚举解炸弹人—— https://www.cnblogs.com/chiweiming/p/9295262.html BFS解炸弹人—— https://www.cnblogs.com/chiw ...
- window中启动vs后鼠标无法移动
你停止wisptis.exe这个进程,在c:\Windows\System32下删除wispitis.exe就可以了!
- 【转】android 布局优化
前言 本篇文章为Android优化的布局部分,该部分应该是Android中很重要的,无论是在自定义控件中,还是在简单的书写布局时,都应该尽量遵循一些优化原则,这样布局的绘制效率才会更高,体验才能更好. ...
- HackFifteen 移除背景以提升Activity启动速度
1.概要: 移除窗口默认背景是提升应用程序启动速度的一个简单技巧.判断是否需要移除背景的原则很简单:如果应用程序界面需要 占据窗口100%的控件,就需要将windowBackground属性设 ...
- SharePoint 2013在浏览器中打开pdf文档
在没有安装Office Web Apps的情况下,SharePoint 2013是支持在IE上直接打开pdf和Excel文档的(只能查看,不能编辑,部分Excel会报错). 当然,需要现在管理中心做一 ...
- ASP.NET jquery-1.9.1 语句
<script src="Script/jquery-1.9.1.js"></script> <script language="javas ...
- MVC 登陆鉴权
public ActionResult Login(string data) { var _params = JsonConvert.DeserializeAnonymousType(data, ne ...
- thedao
TheDao 简化版解释 the Dao 合约 contract f1{ function transfer() { if (acccount[m]>=100) { m.send(100) ac ...
- Insus.NET最近想更换一部手机
Insus.NET曾经使用过好几部手机.给Insus.NET工作与生活上带来了方便.最近想更换一部新手机,因此记念一下以前使用过的手机.当时Insus.NET没有相机,下面图片是网上找的(前四部): ...
- C# LINQ(7)
大部分的LINQ的关键字都说了,最后说一下排序吧. LINQ的是查询的利器. 那么查询就会有排序. 所有LINQ提供了两种简单的排序.倒序和默认排序. 关键字是: orderby ascending ...