在vue.js渲染完介面之後如何再呼叫函數

2022-07-02 14:00:23

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渲染已經完成')
            })
        }
    }
})

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。