Vueリスニングページ要素の高さの変化

Vueを使用する場合、ページレンダリングが完了した後の要素の高さを取得する必要がある場合がありますが、データがレンダリングされていないため、正確な高さが取得できない可能性があります.この場合、watchとthis.$nextTick()を組み合わせて解決する必要があります.

watch:{
     
	listData:function(){
     
		this.$nextTick(function(){
     
			//some code
			console.log($('ul').height())//ul     
		})
	}
}

nextTick:遅延コールバックは、次回のDOM更新サイクルが終了した後に実行される.この方法は、データの修正直後に用いる、更新後のDOM

を取得する.

watch:Vue例のデータ変動を観察するために使用される.オブジェクトに対応し、キーは観察式、値はコールバック

に対応します.nextTick用途
シーンの適用:ビューの更新後に新しいビューに基づいて操作する必要があります