vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題

更新時間：2022年12月03日 09:35:31 作者：CahierX

這篇文章主要介紹了vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個方法

 watch: {
        dataDetails: function() {
            this.$nextTick(() => { 
                this.changeView()
            });
        }
    },

在watch里面寫上要監(jiān)控的數(shù)據(jù)，上面的例子是監(jiān)控dataDetails，在this.$nextTick()勾子里面寫的方法就可以在dataDetails渲染到頁面完成之后執(zhí)行changeView方法

vue頁面渲染結(jié)束事件

在使用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ù)變動。對應一個對象,鍵是觀察表達式,值是對應回調(diào)，再次嘗試，運行后發(fā)現(xiàn)還是不行

5.最終把watch和nextTick組合一起,watch:{ showList:function(){ this.goPrice(0); }}

showList對應表格頁面的綁定變量

6.運行后發(fā)現(xiàn)，已經(jīng)達到了預期的效果

注意：這里 watch 要和 methods 方法平級展示

watch:{
        htcfOrder:function(){
            //頁面渲染完成后的操作
            this.$nextTick(function(){
                // 開工前
                if(vm.htcfOrder !=null && vm.htcfOrder.beforeWorkList !=null && vm.htcfOrder.beforeWorkList.length>0){
                    for (let i = 0; i < vm.htcfOrder.beforeWorkList.length; i++) {
                        if (vm.htcfOrder.beforeWorkList[i].urlType == 1){
                            var player2 = videojs(vm.htcfOrder.beforeWorkList[i].extKey+i,{
                                muted: false,controls : true,height:300,width:300,poster:'',src:'',preload:"auto"
                            },function(){
                            });
                            player2.reset();
                            player2.src(vm.htcfOrder.beforeWorkList[i].extValue);
                            player2.load();
                        }
                    }
                }
            })
        }
    },
methods:{}

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

您可能感興趣的文章: