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 ...
随机推荐
- ArcGIS Desktop和Engine中对点要素图层Graduated Symbols渲染的实现 Rotation Symbol （转）
摘要 ArcGIS中,对于要素图层的渲染,支持按照要素字段的值渲染要素的大小,其中Graduated Symbols可以对大小进行分级渲染.在个人开发系统的过程中,也可以用来美化数据显 ...
- Android 中menu在activity中的使用
1.在res下选择new 选择Android resource directory 2.在弹出框中Resource type选择menu 3.在res下就可以看到menu文件夹 4.在menu文件夹 ...
- mobiscroll_2.15.1
var opt_sex = { theme: 'ios', lang: 'zh', formatValue: function (d) { return d.join(','); }, customW ...
- sql 与 oracle 几个简单语法差别
sql 与 oracle 之间的 语法差别. 简单的几个函数转换 sql-> Up_Time=getdate(), isnull(), substring(), charindex(), ...
- 替归算法获取Treeview所有节点
treeview.nodes是获取下一级所有子节点,但是如果是多层的话,就不能,想个法子来获取所有的节点(含节点的子节点),想了想 还是替归算法比较方便,如是有了下面的代码 public static ...
- ZeroSSL，支持多域名的在线 Let's Encrypt SSL 证书申请工具
前言: 微信需要ssl证书,很多网站都有免费一年的证书:免费一年的证书叫做单域名证书,iis没办法配置多个子站点443端口:我有很多客户需要用我的的域名,同一个域名配置多个ssl,或者支持多个子域名: ...
- 读写文本文件之StreamReader和StreamWriter
private string _filePath = @"1.txt"; //查询文件是否存在,如果不存在,则创建 if (!File.Exists(_filePath)) { u ...
- 析构函数的调用------新标准c++程序设计
示例1: #include<iostream> using namespace std; class CDemo{ public: ~CDemo(){cout<<"d ...
- MultiTrigger
MultiTrigger是多条件触发器.意为多个条件同时满足时才会触发. 用法和Trigger差不多. 但是MultiTrigger的条件是在写在自身的判断环境之中. 基本的语法是: <Mult ...
- ubuntu 安装 删除 卸载 Deb 包文件
图形界面: 安装deb 直接双击图标,输入密码后就可自动安装. 卸载deb 1. 菜单-系统->系统管理->新立得软件包管理器 或 Alt+F2(运行窗口)输入 sudo synaptic ...