How to get the width and height after the vue3 page is loaded

#Get the width and height of vue3 after the page is loaded

It happens that the H5 project meets this requirement. Get the current page height after the page is loaded.

<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>

If you use the vue3.2 version, you can also use syntactic sugar to process it. Directly enter the code:

<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 of vue3.2 to get the dom element Width and height

Knowledge points: ref, nextTike

• ref can be used to obtain DOM objects and create a responsive common object type

• nextTick is a function that accepts a function as a parameter. The official website definition of nextTick is to "delay the callback until after the next DOM update cycle",

NextTike is not used

<!--
 * 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>

**Note: **The list here does not increase immediately

The problem is that we change the list value, Vue does not update the DOM immediately, but updates the DOM at the end of an event loop. This can avoid unnecessary calculations and DOM operations, which is very important for improving performance.

Then we need to get the height of ul after the dom update is completed. At this time, we need to use nextTick.

Use 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>

The above is the detailed content of How to get the width and height after the vue3 page is loaded. For more information, please follow other related articles on the PHP Chinese website!