vue3 페이지가 로드된 후 너비와 높이를 얻는 방법

vue3 페이지가 로드된 후 너비와 높이를 가져옵니다.

H5 프로젝트에는 페이지가 로드된 후 현재 페이지 높이를 가져옵니다.

<template>
<div class="wrap" :>
</div>
</template>
<script lang=&#39;ts&#39;>
import { defineComponent, reactive, nextTick, onMounted, toRefs } from "vue";
export default defineComponent({
  name: "Aboutus",
  setup() {
    let state = reactive({
      hHeight: 0,//页面高度
    });
  onMounted(() => {
    nextTick(()=>{
        state.hHeight = document.documentElement.clientHeight;
        console.log(document.documentElement.clientHeight)
    })
  })
  return {
      ...toRefs(state)
  }
  },
});
</script>

vue3.2 버전을 사용하는 경우 구문 설탕을 사용하여 처리할 수도 있습니다.

<template>
  <div class="wrap" :>
   </div>
</template>
<script setup>
import { reactive, nextTick } from "vue"
const state = reactive({
    hHeight: 0
})
nextTick(()=>{
     state.hHeight = document.documentElement.clientHeight;
     console.log(document.documentElement.clientHeight)
 })
</script>

vue3.2의 vue3을 사용하여 dom 요소의 너비와 높이를 가져옵니다

지식 포인트: ref, nextTike

• ref는 DOM 객체를 얻고 반응형 공통 객체 유형을 생성하는 데 사용할 수 있습니다.

• nextTick은 함수를 매개변수로 받아들이는 함수입니다. "콜백을 다음 DOM 업데이트로 연기"하려면 주기 후에 실행됩니다.

nextTike는 사용되지 않습니다

<!--
 * new page
 * @author: Blaine
 * @since: 2022-06-30
 * page_nextTike.vue
-->
<template>
  <div class="container" >
    <ul ref="myRef">
      <li v-for="(item, index) in pepleList" :key="index">{{ item }}</li>
    </ul>
    <button @click="addHandle">增加</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from &#39;vue&#39;
let pepleList = reactive<string[]>([&#39;蜘蛛侠&#39;, &#39;钢铁侠&#39;, &#39;美国队长&#39;])
const myRef = ref<HTMLElement>();
onMounted(() => {
  console.log(&#39;列表的高度是：&#39;, myRef.value?.clientHeight)
})
const addHandle =  async() => {
  pepleList.push(&#39;闪电侠&#39;)
  // await nextTick()
  console.log(&#39;列表的高度是：&#39;, myRef.value?.clientHeight)
}
</script>

<style scoped>
</style>

**참고: **여기 목록은 즉시 증가하지 않습니다

문제는 목록의 값을 변경하면 vue는 dom을 즉시 업데이트하지 않지만 이벤트 루프가 끝날 때 DOM을 업데이트합니다. 이렇게 하면 불필요한 계산과 DOM 작업을 피할 수 있으며 이는 성능 향상에 매우 중요합니다.

그런 다음 dom 업데이트가 완료된 후 ul의 높이를 가져와야 합니다. 이때 nextTick을 사용해야 합니다.

ref+nextTick을 사용하세요

<!--
 * new page
 * @author: Blaine
 * @since: 2022-06-30
 * page_nextTike.vue
-->
<template>
  <div class="container" >
    <ul ref="myRef">
      <li v-for="(item, index) in pepleList" :key="index">{{ item }}</li>
    </ul>
    <button @click="addHandle">增加</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from &#39;vue&#39;
let pepleList = reactive<string[]>([&#39;蜘蛛侠&#39;, &#39;钢铁侠&#39;, &#39;美国队长&#39;])
const myRef = ref<HTMLElement>();
onMounted(() => {
  console.log(&#39;列表的高度是：&#39;, myRef.value?.clientHeight)
})
const addHandle =  async() => {
  pepleList.push(&#39;闪电侠&#39;)
  await nextTick()
  console.log(&#39;列表的高度是：&#39;, myRef.value?.clientHeight)
}
</script>

<style scoped>
</style>

위 내용은 vue3 페이지가 로드된 후 너비와 높이를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!