Vue--Vue.nextTick()的使用
Vue.nextTick()是比较常用到的API
Vue官网对它的解释是：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
首先要明白Vue的响应式原理（官网有详细的解释）：在data选项里所有属性都会被watch监控，当修改了data的某一个值，并不会立即反应到视图中。vue将你对data的更改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher队列任务。这就有一个延迟时间了（我们看起来是直接反映到视图的，其实并不是！！，只是浏览器引擎在很短的时间内就比较完了数据的前后差异并更新到视图里）。官网有个很清晰的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script> </head>
<body>
<div id="app">
<example></example>
</div>
</body>
<script>
Vue.component('example', {
template: '<span>{{ message }}</span>',
data: function () {
return {
message: '没有更新'
}
},
mounted () {
this.updateMessage();
},
methods: {
updateMessage: function () {
this.message = '更新完成'
console.log(this.$el.textContent) // => '没有更新'
this.$nextTick(function () {
console.log(this.$el.textContent) // => '更新完成'
})
}
}
})
new Vue({
el:'#app'
})
</script>
</html>
在视图上最终显示 更新完成，但在控制台console.log就不一样了
在updateMessage函数里改变了msg的值（异步），下一步打印 msg （同步） 可以看出 打印的是‘没有更新’ 【注意：改变data的某个值，再立即引用，是经常犯的一个错误】，为了规避这个错误，就有了nextTick( ) ,现在再结合官网的那两句话，是不是清晰很多呢？ 视图更新完了就调用nextTick(),此时数据也就更新完了而且插到视图。
那什么场景需要使用到nextTick( ) 呢？
待续。。。。。。。
2017-06-28 00：31
Vue--Vue.nextTick()的使用的更多相关文章
- vue中nextTick
vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue ...
- vue的nextTick的实现
vue的nextTick是用浏览器支持的方法模拟nodejs的process.nextTick 老版本的vue用如下方法来模拟 Promise.thenMutationObserver(Mutatio ...
- Vue中nextTick()解析
最近,在开发的时候遇到一个问题,让我对vue中nextTick()的用法加深了了解- 下面是在组件中引用的一个拖拽的组件: <vue-draggable-resizable class=&quo ...
- Vue之nextTick()
我们有时候操作 DOM,是想在 data 数据变更的时候进行操作. 那么,我们应该怎么做呢? index.html <!DOCTYPE html> <html lang=" ...
- Vue的nextTick是什么？
公司做之前项目的时候,遇到了一些比较困惑的问题,后来研究明白了nextTick的用法. 我们先看两种情况: 第一种: export default { data () { return { msg: ...
- 【vue】nextTick源码解析
1.整体入手 阅读代码和画画是一样的,忌讳一开始就从细节下手(比如一行一行读),我们先将细节代码折叠起来,整体观察nextTick源码的几大块. 折叠后代码如下图 整体观察代码结构 上图中,可以看到: ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- 基于源码分析Vue的nextTick
摘要:本文通过结合官方文档.源码和其他文章整理后,对Vue的nextTick做深入解析.理解本文最好有浏览器事件循环的基础,建议先阅读上文<事件循环Event loop到底是什么>. 一. ...
- vue 2.0源码学习笔记—new Vue ( Vue 初始化过程 )
new Vue(Vue 初始化) 一个vue实例化到底经历了什么?已下是博主自己的总结,不正确的地方请指出,谢谢~ 一.简述 从使用角度来看,挂载的顺序如下 1. $slots 2. $scopedS ...
- Javascript - Vue - vue对象
vue提供了一整套前端解决方案,可以提升企业开发效率 vue的处理过程 app.js 项目入口,所有请求最先进入此模块进行处理 route.js 由app.js调用,处理路由的分发 controlle ...
随机推荐
- Arduino使用HC05蓝牙模块与手机连接
Arduino使用HC05蓝牙模块与手机连接 一切都是最好的选择 首先是线路连接,一定不要接错了 Arduino 代码 #include <SoftwareSerial.h> // Pin ...
- cogs 1962. [HAOI2015]树上染色
★★☆ 输入文件:haoi2015_t1.in 输出文件:haoi2015_t1.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 有一棵点数为N的树,树边有边 ...
- Python3基础 try-指定except-as reason 捕获打开一个不存在的文件的时候，会产生OSError异常的示例
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- ubuntu下git clone 提速
环境:ubuntu16.04 方法:通过socks5代理并且使用http链接 步骤: 1.设置全局使用socks5代理,并且使用http传输 git config --global http.prox ...
- HDU 1285 确定比赛名次（拓扑排序）题解
Problem Description 有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委 ...
- Python Sip [RuntimeError: the sip module implements API v11.0 to v11.2 but the PyQt5.QtCore module requires API v11.3]
不知道原因,尝试卸载.编译安装均失败.只有这样曲线救国 import matplotlib matplotlib.use("WXAgg",warn=True) import mat ...
- BZOJ 1015: [JSOI2008]星球大战starwar（并查集求连通块+离线处理）
http://www.lydsy.com/JudgeOnline/problem.php?id=1015 题意: 思路:好题啊!!! 这道题目需要离线处理,先把所有要删的点给保存下来,然后逆序加点,这 ...
- POJ 1753 Flip Game（bfs+位压缩运算）
http://poj.org/problem?id=1753 题意:一个4*4的棋盘,只有黑和白两种棋子,每次翻转一个棋子,并且其四周的棋子也跟着翻转,求棋盘全为黑或全为白时所需的最少翻转次数. 思路 ...
- JQUERY链式操作实例分析
本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...
- Android广播接收器和Activity间传递数据
Activity向广播接收器传递数据很简单,只需要在发送广播前将数据put进Intent中就行了. 广播接收器怎么向Activity传送数据?这里要用到接口,通过在广播接收器里定义一个接口,然后让接收 ...