博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue里的nextTick回调函数
阅读量:6587 次
发布时间:2019-06-24

本文共 885 字,大约阅读时间需要 2 分钟。

  vue里面本身带有两个回调函数:

  一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调。

  另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调。

  栗子:

  • {
    {item}}
new Vue({ el:'#demo', data:{ list=[0,1,2,3,4,5,6,7,8,9,10] }, methods:{ push:function(){
       this.list.push(11);   this.nextTick(function(){
         alert('数据已经更新')        });   this.$nextTick(function(){          alert('v-for渲染已经完成')        })   } } })

  什么是Vue.nextTick()

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

  什么时候需要用Vue.nextTick()

  你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢?

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

  在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

 

转载地址:http://eihno.baihongyu.com/

你可能感兴趣的文章
阐述Spring框架中Bean的生命周期?
查看>>
Java 面向对象 之 对象引用 this的引用
查看>>
虚拟内存管理
查看>>
从零开始系列汇总
查看>>
注水、占坑、瞎掰:起底机器学习学术圈的那些“伪科学”
查看>>
大数据小视角1:从行存储到RCFile
查看>>
C# 获取程序的三种版本
查看>>
JavaScript常用设计模式
查看>>
eNSP华为模拟器使用——(7)eNSP模拟帧中继交换机
查看>>
第18天:京东网页头部制作
查看>>
Android RecyclerView批量更新notifyItemRangeChanged
查看>>
.NET Core中延迟单例另一种写法【.NET Core和.NET Framework的beforefieldinit差异】
查看>>
懒加载和预加载
查看>>
好消息:Dubbo & Spring Boot要来了
查看>>
面向对象封装的web服务器
查看>>
linux下安装python3.6
查看>>
pytorch新手需要注意的隐晦操作Tensor,max,gather
查看>>
开启“互联网+”模式打造智能移动APP巡检系统
查看>>
以太坊和区块链
查看>>
Ian Goodfellow等提出自注意力GAN,ImageNet图像合成获最优结果!
查看>>