this.$nextTick() 学(cai)习(keng)

1. 用法：在数据修改之后立即使用这个方法，获取更新后的DOM。

官方文档解释：

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如：
<div id="example">{{message}}</div>
var vm = new Vue({el: '#example',data: {message: '123'}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {vm.$el.textContent === 'new message' // true
})
在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：
Vue.component('example', {template: '<span>{{ message }}</span>',data: function () {return {message: '未更新'}},methods: {updateMessage: function () {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'this.$nextTick(function () {console.log(this.$el.textContent) // => '已更新'})}}
})

大白话来讲就是，组件里的数据发生了改变，但DOM又没有更新，可我们需要用更新后的DOM来实现一些需求，那么此时就可以（在改变数据后）使用Vue.nextTick(callback)，这个callback会在DOM更新后调用执行，以此来实现我们的需求。

我在这里举一个小例子：

<div id = 'app'> {{ a }} </div><script>const vm = new Vue({el: '#app',data: {a: 10}})vm.a = 100console.log(vm.a) // 100console.log(vm.$el.innerHTML) // 10// vm.$el.innerHTML它的值仍然为10，就是DOM异步更新// 如果需要获取更改后的a的值，可以通过nextTick来实现vm.$nextTick(() => {console.log(vm.$el.innerHTML) // 100})// 解释说明：nextTick()中的回调函数在DOM更新后执行，取到的数据就是更新后的数据// html页面显示的数据是 100
</script>

this.$nextTick() 学(cai)习(keng)相关推荐

2019 Mac装Cocoapods的步(cai)骤(keng)记录
在搞毕设的交代码之际发现新自用机没装 Cocoapods,经过一些步(cai)骤(keng)总算搞定√ 随手做个记录. 时间:2019.5.22 系统:macOS Mojave 10.14.4 参考: ...
那一个国家买东西要用计算机,计算机技能学材习料.doc
计算机技能学材习料第一部分 Windows XP 操作系统实验一文件及文件夹的管理与操作一.实验目的 1 熟悉Windows XP的文件系统 2 掌握Windows XP文件和文件夹的管理方法 ...
如果你现在学Android---学习使用Kotlin进行Android开发
原文地址: http://www.eoeandroid.com/thread-902176-1-1.html?_dsign=650ea146 之前写了一篇<如果你现在学Android–写给新手的 ...
英语和数学不好可以学python-学习Python总是学了新内容又忘了旧的咋办?
学习Python总是学了新内容又忘了旧的咋办? 比如爬虫的几个解析库,学了pyquery后感觉beautifulsoup又有点忘了,只能大概记得有哪些功能,xpath感觉基本忘光了,最近看了一些sel ...
没有计算机基础可以学python-学习第一天day1（计算机基础，及python基础）
一,计算机基础 1.什么是编程语言语言是一个事物与另外一个事物沟通的介质编程语言是程序员与计算机沟通的介质 2.什么是编程编程就是程序按照某种编程语言的语法规范将自己想要让计算机做的事情表达出来 ...
【一些实用的学习与资源网站，白(学)嫖(习)使人快乐】
Some Learning And Resource Sites 学习类 B站 https://www.bilibili.com/video/BV1YW411T7GX?p=9 简介:我来自B站大学软工 ...
Java23种设计模式总结-学而不习则罔
冰冻三尺,非一日之寒经常说到Java的设计模式,今天做个总结和分享,以便学习. 设计模式并没有用到新的任何关于Java的新知识点,无非就是大佬们在根据Java语言特性的基础上,根据一定的设计原则,结 ...
flutter图片识别_从头到尾撸一遍Flutter的一切...
Flutter学(cai)习(keng)之路(Exploring Flutter in action) 创世宣言尽情踩坑吧 ⤵️ 主要Cover到的点 [x] 路由界面 [x] 状态传递 [x] 子 ...
建议收藏！最有效率的python数据分析入门书单
又到了周末,是时候跟新一波了!常有人问起来,我是怎么转行到数据分析行业的,又是怎么从零编程入坑python的,面对市面上那么多<xx天入门>的书籍,该如何挑选?今天小文将捋一捋我的学(ru ...
7.3 习而学与CDIO，来自工程教育思想的启示——《逆袭大学》连载
返回到[全文目录] 目录 7.3 习而学与CDIO,来自工程教育思想的启示践行"习而学"的宝贵思想国际工程教育的前沿--CDIO 7.3 习而学与CDIO,来自工程教育思想的启 ...

this.$nextTick() 学(cai)习(keng)

1. 用法：在数据修改之后立即使用这个方法，获取更新后的DOM。

this.$nextTick() 学(cai)习(keng)相关推荐

最新文章

热门文章

this.$nextTick() 学(cai)习(keng)

1. 用法： 在数据修改之后立即使用这个方法，获取更新后的DOM。

this.$nextTick() 学(cai)习(keng)相关推荐

最新文章

热门文章

1. 用法：在数据修改之后立即使用这个方法，获取更新后的DOM。