Vue.nextTick()理解

什么是Vue.nextTick()

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

注意：重点是获取更新后的DOM 就是在开发过程中有个需求是需要在created阶段操作数据更新后的节点这时候就需要用到Vue.nextTick()

原因

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以在created中一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

案例一

<template><div id="app"><div ref="msgDiv">{{msg1}}</div><br/><div>{{msg2}}</div><br/><br/><button @click="changeMsg">点击我</button></div>
</template>
<script>export default {name: 'App',data(){return {msg1: "你我贷",msg2: "理财"}},     methods: {changeMsg() {this.msg1 = "飞旋"this.msg2 = this.$refs.msgDiv.textContent;console.log(this.$refs.msgDiv.textContent)this.$nextTick(function(){console.log(this.$refs.msgDiv.textContent)})}}}
</script>复制代码

触发前：

触发后：

案例二

<template><div id="app"><div ref="msgDiv" id="msgDiv" v-if="showDiv">{{msg1}}</div><button @click="changeMsg">点击我</button></div>
</template><script>export default {name: 'App',data(){return {msg1: "你我贷",showDiv: false}}, methods: {changeMsg() {this.showDiv = trueconsole.log(document.getElementById("msgDiv"))this.$nextTick(function(){console.log(document.getElementById("msgDiv"))})}}}
</script> 复制代码

点击前：

点击后：

注意：上面代码执行后第一次console.log(document.getElementById("msgDiv"))输出的是null 这里涉及一个重要的概念异步更新队列。

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际工作。事实上，在执行this.showDiv = true;时，div仍然还是没有被创建出来，直到下一个Vue事件循环时，才开始创建。$nextTick就是用来知道什么时候DOM更新完成的,因此上述代码中第二个console.log(document.getElementById("msgDiv"))输出的是<div id="msgDiv">你我贷</div>

Vue.nextTick()理解相关推荐

浏览器事件循环机制与Vue nextTick的实现
浏览器事件循环机制先上一段简单的代码 console.log('aa'); setTimeout(() => { console.log('bb')}, 0); Promise.resolve ...
2021-08-06随记(vertical-align, 顶线、底线、中线、基线，vue原理理解)
vertical-align 父元素是inline或者是table-cel,如果是inline-block或者block则必须要设置line-height(和高度一样)子元素为inline或者inli ...
vue.nextTick()方法的使用详解（简单明了）
什么是Vue.nextTick()?? 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法.所 ...
Vue nextTick 机制
背景我们先来看一段Vue的执行代码: export default {data () {return {msg: 0}},mounted () {this.msg = 1this.msg = 2th ...
Vue.nextTick和Vue.$nextTick
`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调. `Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调. 参考原文:http:// ...
vue.$nextTick 解决了哪些问题
vue.$nextTick 解决了哪些问题转载于:https://www.cnblogs.com/ivan5277/p/10817451.html
[vue] $nextTick有什么作用？
[vue] $nextTick有什么作用? 处理数据动态变化后,dom还未及时更新的问题.nexttick就可以获取到数据更新后最新的dom变化个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃 ...
[vue] 有使用过vue吗？说说你对vue的理解
[vue] 有使用过vue吗?说说你对vue的理解 1.mvvm框架 2.数据驱动 3.SPA 4.渐进式个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
什么是Vue.nextTick()
什么时候需要用的Vue.nextTick() 你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中.原因是什么呢,原因是在created() ...

Vue.nextTick()理解

什么是Vue.nextTick()

原因

案例一

案例二

Vue.nextTick()理解相关推荐

最新文章

热门文章