vue.js渲染完界面后調(diào)用函數(shù)

在使用vue.js框架的時候，有時候會希望在頁面渲染完成之后，再執(zhí)行函數(shù)方法來處理初始化相關(guān)的操作，如果只處理頁面位置、寬或者高時，必須要在頁面完全渲染之后才可以，頁面沒有加載完成之前，獲取到的寬高不準確。

使用過jquery的都知道，有個ready方法可以使用，但vue.js則需要結(jié)合watch和nextTick方法來使用。

1.下面開始介紹下

在頁面加載一個數(shù)據(jù)列表完成之后，頁面自動滾動定位到中間某個列表元素，需要在列表數(shù)據(jù)渲染完成，計算列表高度，再控制定位到指定行。

首先介紹下一開始嘗試沒有生效的方案，這也是大家最容易出現(xiàn)錯誤的地方，vue.js提供的mounted函數(shù)，表示掛載到實例上去之后調(diào)用該鉤子。

2.運行之后

發(fā)現(xiàn)mounted執(zhí)行的時候，獲取到的height值不對，打個斷點也可以發(fā)現(xiàn)，此時頁面沒有渲染完成，列表塊還是一片空白

3.此時查詢官方api文檔發(fā)現(xiàn)

有一個nextTick方法，意思是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。

在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。

使用之后發(fā)現(xiàn)，還是不能解決我所需要的效果

4.繼續(xù)查詢api文檔發(fā)現(xiàn)

watch方法，用于觀察Vue實例上的數(shù)據(jù)變動。

對應(yīng)一個對象,鍵是觀察表達式,值是對應(yīng)回調(diào)，再次嘗試，運行后發(fā)現(xiàn)還是不行

5.最終把watch和nextTick組合一起

watch:{ ? ?
	showList:function(){ ? ? ? ?
	this.goPrice(0); ? ?
}}

showList對應(yīng)表格頁面的綁定變量

<tr v-for="(item,index) in showList">

6.運行后發(fā)現(xiàn)

已經(jīng)達到了預(yù)期的效果

最后說明下，有時候我們會想到使用setTimeout的方式來實現(xiàn)，使用這種方式需要設(shè)置個超時執(zhí)行時間，由于渲染時間無法確定，有快有慢，就會出現(xiàn)不穩(wěn)定的現(xiàn)象。

vue渲染完成事件

vue里面本身帶有兩個回調(diào)函數(shù)

• 一個是`Vue.nextTick(callback)`，當(dāng)數(shù)據(jù)發(fā)生變化，更新后執(zhí)行回調(diào)。
• 另一個是`Vue.$nextTick(callback)`，當(dāng)dom發(fā)生變化，更新后執(zhí)行的回調(diào)。

栗子：

...
<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('數(shù)據(jù)已經(jīng)更新')
? ? ? ? ? ? });
? ? ? ? ? ? this.$nextTick(function(){
? ? ? ? ? ? ? ? alert('v-for渲染已經(jīng)完成')
? ? ? ? ? ? })
? ? ? ? }
? ? }
})

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論