Vue 中 $nextTick() 的应用
Vue 在更新 DOM 时是异步执行的。
只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。
异步更新DOM实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue nextTick</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<example></example>
</div>
<script>
// 注册 example 组件
Vue.component('example', {
template: '<span ref="box" @click="updateMessage">{{ message }}</span>',
data () {
return {
message: '未更新'
}
},
methods: {
updateMessage () {
this.message = '已更新'
console.log('nextTick方法前--->', this.$refs.box.textContent) // => '未更新'
this.$nextTick(function () {
console.log('nextTick方法内--->', this.$refs.box.textContent) // => '已更新'
})
console.log('nextTick方法后--->', this.$refs.box.textContent) // => '未更新'
}
}
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>
</html>
点击 span , 执行 updateMessage方法，输出结果如下：
nextTick方法前---> 未更新
nextTick方法后---> 未更新
nextTick方法内---> 已更新
可见，Vue 数据发生变化之后，视图不会立即变化。该更新过程是异步的。
所以，如果要获取更新后的视图，可以使用 $nextTick(callback)。这里的回调函数（callback）将在数据更新完成，视图更新完毕之后被调用。
$nextTick 结合 async/await 语法
$nextTick() 返回一个 Promise 对象，所以可以使用新的 ES2016 async/await 语法完成相同的事情：
methods: {
async updateMessage () {
this.message = '已更新'
console.log('nextTick方法前--->', this.$refs.box.textContent) // => '未更新'
await this.$nextTick(function () {
console.log('nextTick方法内--->', this.$refs.box.textContent) // => '已更新'
})
console.log('nextTick方法后--->', this.$refs.box.textContent) // => '已更新'
}
}
执行点击事件，打印结果：
nextTick方法前---> 未更新
nextTick方法内---> 已更新
nextTick方法后---> 已更新
$nextTick 常用场景
在Vue生命周期钩子函数created()中进行的DOM操作。
由于created()钩子函数中还未对DOM进行任何渲染，所以无法直接操作，需要通过$nextTick()回调来完成。
created() {
console.log(this.$refs.box.textContent); // TypeError: Cannot read property 'textContent' of undefined
this.$nextTick(() => {
console.log(this.$refs.box.textContent); // 未更新
})
},
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是什么？
公司做之前项目的时候,遇到了一些比较困惑的问题,后来研究明白了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之nextTick全面解析
vue的第一篇文章,介绍一下简单的nextTick方法的实现原理 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框 ...
- vue中nextTick和$nextTick的差别
<ul id="demo"> <li v-for="item in list">{{item}}</div> < ...
- 基于iscroll的better-scroll在vue中的使用
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...
随机推荐
- 历届试题 危险系数-（dfs+记录路径）
历届试题 危险系数 问题描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我 ...
- OpenResty: PHP增加数据库插件
首先修改下php.ini 文件 告诉php当前的扩展库路径 扩展库--就是扩展的其它功能的库 这个就是扩展库文件夹,里面有很多功能性文件 就是增加这一句 extension_dir = &qu ...
- 【斜率优化】【P5468】 [NOI2019]回家路线
Description 给定 \(n\) 点,这 \(n\) 个点由 \(m\) 班列车穿插连结.对于第 \(i\) 班列车,会在 \(p_i\) 时刻从 \(x_i\) 站点出发开向 \(y_i\) ...
- ZROI 暑期高端峰会 A班 Day6 DP
[THUPC2018]城市地铁规划 (日常讲题之前 YY--) 一眼出 \(O(n^3+nk)\) 做法. \(dp[i][j]\) 表示前 \(i\) 个点,前 \(i\) 个点度数和为 \(j\) ...
- centos 升级openSSH7.81
1.下载相关依赖包 [root@Log ~]# yum install -y gcc openssl-devel pam-devel rpm-build 2.下载安装包 wget http://ftp ...
- bat修改文件内容
#file.vbsSet fso = Wscript.CreateObject("Scripting.FileSystemObject")set f=fso.opentextfil ...
- 第6课 nullptr_t和nullptr
一. nullptr与nullptr_t (一)nullptr_t是一种数据类型,而nullptr是该类型的一个实例.通常情况下,也可以通过nullptr_t类型创建另一个新的实例. (二)所有定义为 ...
- 使用MobaXterm配置ssh隧道(port forwarding)
背景描述:如图所示,本地与远程服务器之间存在防火墙,防火墙只允许SSH端口通过,为访问远程服务器,我们可以借助MobaXterm来与SSH服务器建立隧道,使得防火墙外的用户能够访问远程服务器 具体配置 ...
- 别再说你不会 ElasticSearch 调优了，都给你整理好了
来源:http://tinyurl.com/y4gnzbje 第一部分:调优索引速度 第二部分-调优搜索速度 第三部分:通用的一些建议 英文原文:https://www.elastic.co/guid ...
- 依赖注入（DI）与控制反转（IOC）基础知识
依赖注入(DI)与控制反转(IOC)基础知识 一.什么是依赖注入? 依赖注入英文是Dependcy Injection简写DI,依赖注入会将所依赖的对象自动交由目标对象使用,而不是让对象自己去获取. ...