vue.js全局API之nextTick全面解析
更新时间：2017年07月07日 09:03:42 作者：Demon_Han
本篇文章主要介绍了vue.js全局API之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
官方介绍：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
就是DOM更新完成之后执行的方法，并且超级方便的事情是回调函数中的this会绑定到最新的vue实例上。
代码示例如下：
<p ref="mgs">{{mgs}}</p>
<button @click="updateDom">点击更新DOM</button>
data:function () {
return {
mgs:"DOM"
}
}
updateDom:function () {
this.mgs = "update Dom";
console.log(this.$refs.mgs.innerHTML);
this.$nextTick(function () {
console.log(this.$refs.mgs.innerHTML);
})
}
点击更新按钮，调用updateDom，首先给mgs重新赋值，此时打印页面中p标签对应的内容，以及nextTick中也打印相应的内容，结果如下：
从结果可以看出，this.mgs = “update Dom”;执行之后，DOM并没有直接更新，而nextTick是等到DOM更新完成之后进行回调，回调函数中的this已经是更新过的vue
代码地址：https://github.com/Demon-han/vue_demo/
其中nextTick.vue为该实例，其他组件将在其他文章中详细介绍
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
ESLint是一个QA工具，这篇文章主要介绍了详解ESLint在Vue中的使用小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了vuejs在解析时出现闪烁的原因及防止闪烁的方法,本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
下面小编就为大家带来一篇解决vue.js在编写过程中出现空格不规范报错的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
vue源码学习之Object.defineProperty对象属性监听
这篇文章主要介绍了vue源码学习之Object.defineProperty对象属性监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
今天小编就为大家分享一篇vue.js+element-ui动态配置菜单的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue实现自定义字段导出EXCEL的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
Vue3中的keep-alive组件用于缓存页面,以便在切换页面时保留其状态,下面这篇文章主要给大家介绍了关于Vue3除了keep-alive还有哪些实现页面缓存的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue路由切换时取消之前的所有请求操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
右键菜单组件非常常见,所有的前端开发工程师都会遇到类似的功能组件开发需求,这篇文章主要给大家介绍了关于Vue实现右键菜单组件的超详细教程,文中介绍的方法支持快捷键,需要的朋友可以参考下2024-02-02
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，Vue.js 是一个提供 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。这篇文章给大家介绍Vue.js 和 MVVM 的注意事项，感兴趣的朋友一起看看吧2016-11-11
最新评论