谈谈Vue中的nextTick
更新时间：2021年04月25日 14:55:51 作者：有梦想的咸鱼前端
Vue.nextTick是Vue官方给我们提供的一个API（方法），作用是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM
当数据发生变化之后，DOM视图并不会立即更新，如果我们在发生变化之后立马去获取某个节点或者某个节点的值，很有可能结果就是undefined；因为Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新；
来看一个小demo：
App.vue
<template>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Change the Message</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg:"Hello Vue",
msg1: '',
}
},
methods:{
changeMsg(){
this.msg='hello world';
this.msg1=this.$refs.message.innerHTML;
console.log("更新DOM之前:"+this.msg1)
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
我们通过运行代码能够看到当我们不在this.$nextTick方法里面进行DOM操作的时候，this.$refs.message.innerHTML的值存储的还是之前的初始值；
修改代码：
App.vue
<template>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Change the Message</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg:"Hello Vue",
msg1: '',
}
},
methods:{
changeMsg(){
this.msg='hello world';
// this.msg1=this.$refs.message.innerHTML;
// console.log("更新DOM之前:"+this.msg1)
this.$nextTick(()=>{
this.msg1=this.$refs.message.innerHTML;
console.log("更新DOM之后:"+this.msg1)
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
修改代码之后我们可以发现，使用this.$nextTick很容易的就接收到了更新后的值，正如官网解释：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM；
再来修改代码对比一下：
App.vue
<template>
<div id="app">
<div ref="message">{{msg}}</div>
<div v-if="msg1">{{msg1}}</div>
<button @click="changeMsg">Change the Message</button>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg:"Hello Vue",
msg1: '',
}
},
methods:{
changeMsg(){
this.msg='hello world';
this.msg1=this.$refs.message.innerHTML;
console.log("更新DOM之前:"+this.msg1)
this.$nextTick(()=>{
this.msg1=this.$refs.message.innerHTML;
console.log("更新DOM之后:"+this.msg1)
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
经过修改代码，我们现在可以很容易看出来this.$nextTick(callback)的作用，callback是回调函数也就是我们要进行操作DOM的事情；
应用场景：
- 在vue的生命周期钩子函数created()中进行DOM操作的时候一定要把DOM操作放入到this.$nextTick()中；
- 因为在created钩子函数触发的时候，DOM是没有进行渲染的；DOM没有进行渲染，然后进行DOM操作无疑是徒劳的；
- 所以我们在created中进行DOM操作的时候，一定要将DOM操作放入到this.$nextTick()中；
- 与之相反的是mounted，因为当触发mounted的时候，DOM的挂载和渲染都已经完成了，所以在mounted中进行DOM操作是不会有任何问题的；
因为DOM更新是异步的，像v-if指令判断增删DOM元素，我们在方法中给变量赋值的时候，如果不使用this.$nextTick()，我们很有可能拿到的还是初始值，如果想拿到更新后的值，需要使用this.$nextTick（）方法
以上就是Vue中的nextTick的详细内容，更多关于Vue中的资料请关注脚本之家其它相关文章！
相关文章
Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等
最近在学Vue和javascript感觉js的好多方法都不太清楚,这里彻底总结下,这篇文章主要给大家介绍了关于Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等的相关资料,需要的朋友可以参考下2024-01-01
本文主要介绍了Vue3+Element+Ts实现表单的基础搜索重置等功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了vue data中如何获取使用store中的变量，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
在实际的项目开发中,使用svg图标占用内存比图片更小,映入图片内存比较大,同时也适用于不同屏幕的尺寸,下面这篇文章主要给大家介绍了关于vue项目引入svg图标的完整步骤,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue-cli 如何打包上线的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Vue如何比较字符串变化并高亮变化的部分问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
本篇文章主要介绍了Vuex之理解Store的用法，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中2017-04-04
在 Vue.js 中主要通过第三方库实现表格拖动排序功能,其中最常用的库是 SortableJS,下面我们就来看看如何使用SortableJS实现表格拖动排序吧2025-01-01
这篇文章主要介绍了Vue自定义过滤器格式化数字三位加一逗号的实现代码,需要的朋友可以参考下2018-03-03
本文主要介绍了Django+Vue.js实现搜索功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
最新评论