vue中的nextTick

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

实际上也就是传进来的函数延迟到dom更新后再使用，也就是延迟执行了代码
下面有个网上的小例子：
<div class="app">
<div id="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
<script>
new Vue({
el: '.app',
data: {
msg: 'Hello Vue.',
msg1: '1',
msg2: '2',
msg3: '3'
},
methods: {
changeMsg() {
this.msg = "Hello world"
var msgDiv=document.getElementById('msgDiv')
this.msg1 = msgDiv.innerHTML
// nextTick
this.$nextTick(() => {
this.msg2 = msgDiv.innerHTML
})
this.msg3 = msgDiv.innerHTML
}
}
})
</script>

没有使用nextTick时，虽然有赋值操作，但是并没有引起视图层的更新，有了nextTick,我们只需要把要执行的函数传递给t

转载于:https://blog.51cto.com/12885303/2120279

vue中的nextTick相关推荐

Vue中的$nextTick有什么作用？
Vue中的$nextTick有什么作用? 官方定义在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM 什么意思呢? 我们可以理解成,Vue 在更新 D ...
vue中this.$nextTick()的使用---SpringCloud Alibaba_若依微服务框架改造_ElementUI---工作笔记017
this.$nextTick(() => {this.isUpdateTable = true;; }) 可以看到在vue中我们使用,更新一些变量的时候,用了这个this.$nextTick函数 ...
vue中this.$nextTick()使用解析
原理 vue中数据和dom渲染由于是异步的,所以要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中. this.$nextTick 作用是可以将回调延迟到下次DO ...
Vue中的$nextTick
如果面试官问你,怎么样实现一个网站切换皮肤的方案呢? 以前想的是直接用一个配置文件配置几种状态,然后用js根据配置文件设置一下就好了. 面试官回:这只是一个大概思路的,不够具体,你能说一下具体细节吗? ...
vue 中的nextTick
在vue生命周期的created() 钩子函数进行DOM操作一定要放在vue.nextTick()的回调函数中. 因为在created() 钩子函数执行时,DOM其实并未进行任何的渲染,所以执行DOM ...
[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结
this.$nextTick()原理: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中 ...
vue 中 this.$nextTick()说明及使用
$nextTick Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTic ...
Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
vue 判断一个数是否在数组中_高级前端进阶，vue如何实现$nextTick
前言: 本文需要一定的事件循环相关知识,想了解事件循环的小伙伴可以看这里. 本文要弄明白下面两件事: $nextTick什么时候执行 vue中nextTick与$nextTick区别 1.查看源码中 ...

vue中的nextTick

vue中的nextTick相关推荐

最新文章

热门文章