在vue.js渲染完界面之後如何再調用函數
vue.js渲染完界面後調用函數
在使用vue.js框架的時候,有時候會希望在頁面渲染完成之後,再執行函數方法來處理初始化相關的操作,如果隻處理頁面位置、寬或者高時,必須要在頁面完全渲染之後才可以,頁面沒有加載完成之前,獲取到的寬高不準確。
使用過jquery的都知道,有個ready方法可以使用,但vue.js則需要結合watch和nextTick方法來使用。
1.下面開始介紹下
在頁面加載一個數據列表完成之後,頁面自動滾動定位到中間某個列表元素,需要在列表數據渲染完成,計算列表高度,再控制定位到指定行。
首先介紹下一開始嘗試沒有生效的方案,這也是大傢最容易出現錯誤的地方,vue.js提供的mounted函數,表示掛載到實例上去之後調用該鉤子。
2.運行之後
發現mounted執行的時候,獲取到的height值不對,打個斷點也可以發現,此時頁面沒有渲染完成,列表塊還是一片空白
3.此時查詢官方api文檔發現
有一個nextTick方法,意思是在下次 DOM 更新循環結束之後執行延遲回調。
在修改數據之後立即使用這個方法,獲取更新後的 DOM。
使用之後發現,還是不能解決我所需要的效果
4.繼續查詢api文檔發現
watch方法,用於觀察Vue實例上的數據變動。
對應一個對象,鍵是觀察表達式,值是對應回調,再次嘗試,運行後發現還是不行
5.最終把watch和nextTick組合一起
watch:{ showList:function(){ this.goPrice(0); }}
showList對應表格頁面的綁定變量
<tr v-for="(item,index) in showList">
6.運行後發現
已經達到瞭預期的效果
最後說明下,有時候我們會想到使用setTimeout的方式來實現,使用這種方式需要設置個超時執行時間,由於渲染時間無法確定,有快有慢,就會出現不穩定的現象。
vue渲染完成事件
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渲染已經完成') }) } } })
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。