1. 程式人生 > >vue $nextTick( [callback] )使用場景

vue $nextTick( [callback] )使用場景

vm.$nextTick( [callback] )函式的用法:將回調延遲到下次 DOM 更新迴圈之後執行。在修改資料之後立即使用它,然後等待 DOM 更新。

1、因此可以在created或者mounted函式中使用vm.$nextTick( [callback] )函式,來為需要新增事件的dom元素新增事件。vue生命週期中提供了created,mounted方法,可以在頁面初始化時候獲取一些頁面需要的資料,但是有的時候需要根據資料動態的為頁面某些dom元素新增事件,這就要求在dom元素渲染完畢時去設定,但是created與mounted函式執行時一般dom並沒有渲染完畢,所以就會出現獲取不到,新增不了事件的問題,一開始沒有發現 vm.$nextTick( [callback] )方法時,使用定時器setInterval來迴圈判斷元素是否存在,存在後設定事件,取消定時器,但是該方法實在不好,後來閱讀vue文件時發現 vm.$nextTick( [callback] )函式。

2、在使用某個第三方外掛時 ,希望在vue生成的某些dom動態發生變化時重新應用該外掛,也會用到該方法,這時候就需要在 $nextTick 的回撥函式中執行重新應用外掛的方法。