在vue.js渲染完界面后怎么再調用函數

這篇文章主要講解了“在vue.js渲染完界面后怎么再調用函數”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“在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渲染已經完成')
            })
        }
    }
})

感謝各位的閱讀，以上就是“在vue.js渲染完界面后怎么再調用函數”的內容了，經過本文的學習后，相信大家對在vue.js渲染完界面后怎么再調用函數這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！