码迷,mamicode.com
首页 > 其他好文 > 详细

vue里的nextTick回调函数

时间:2018-08-01 23:58:43      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:应该   方法   ted   dom   回调   create   cal   vue生命周期   for   

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

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

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

  栗子:

<ul id="demo">
    <li v-for="item in list">{{item}}</div>
</ul>

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()的回调函数中。

 

vue里的nextTick回调函数

标签:应该   方法   ted   dom   回调   create   cal   vue生命周期   for   

原文地址:https://www.cnblogs.com/goloving/p/9404432.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!