vue3页面加载完成后如何获取宽度、高度

更新时间：2023年04月24日 09:32:23 作者：赚成美业

这篇文章主要介绍了vue3页面加载完成后如何获取宽度、高度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue3页面加载完成后获取宽度、高度

刚好H5项目有用到这个需求，页面加载完成后获取当前页面高度，记录一下。^_^

<template>
<div class="wrap" :style="{height:hHeight+'px'}">
</div>
</template>
<script lang='ts'>
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" :style="{height:state.hHeight+'px'}">
   </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之vue3.2获取dom元素的宽高

知识点：ref，nextTike

ref可以用于dom对象的获取，以及创建一个响应式的普通对象类型
nextTick是一个函数，它接受一个函数作为参数，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 'vue'
let pepleList = reactive<string[]>(['蜘蛛侠', '钢铁侠', '美国队长'])
const myRef = ref<HTMLElement>();
onMounted(() => {
  console.log('列表的高度是：', myRef.value?.clientHeight)
})
const addHandle =  async() => {
  pepleList.push('闪电侠')
  // await nextTick()
  console.log('列表的高度是：', myRef.value?.clientHeight)
}
</script>

<style scoped>
</style>

**注意：**这里的list并没有立即增加

问题在于我们改变list的值时，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 'vue'
let pepleList = reactive<string[]>(['蜘蛛侠', '钢铁侠', '美国队长'])
const myRef = ref<HTMLElement>();
onMounted(() => {
  console.log('列表的高度是：', myRef.value?.clientHeight)
})
const addHandle =  async() => {
  pepleList.push('闪电侠')
  await nextTick()
  console.log('列表的高度是：', myRef.value?.clientHeight)
}
</script>

<style scoped>
</style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue+element实现批量删除功能的示例
下面小编就为大家分享一篇vue+element实现批量删除功能的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue响应式原理及双向数据绑定示例分析
这篇文章主要为大家介绍了Vue响应式原理及双向数据绑定的示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue.js教程之axios与网络传输的学习实践
这篇文章主要给大家介绍了Vue.js之axios与网络传输的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟随小编一起来学习学习吧。
2017-04-04
vue3父子组件传值双向绑定及注意问题小结
这篇文章主要介绍了Vue3中如何通过v-model实现父子组件的双向数据绑定及利用computed简化父子组件双向绑定,本文结合示例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
vue项目引入本地bootstrap不生效问题及解决
这篇文章主要介绍了vue项目引入本地bootstrap不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue预览图片和视频的几种实现方式
本文主要介绍了Vue预览图片和视频的几种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
vue懒加载和子组件懒加载的区别详解
这篇文章主要给大家介绍了vue懒加载和子组件懒加载有什么区别,Vue懒加载指的是对图片等资源的延迟加载,而子组件懒加载则是指延迟加载组件实例,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下
2023-12-12
iview同时验证多个表单问题总结
这篇文章主要介绍了iview同时验证多个表单问题总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
使用Webpack提高Vue.js应用的方式汇总(四种)
Webpack是开发Vue.js单页应用程序的重要工具。下面通过四种方式给大家介绍使用Webpack提高Vue.js应用，需要的的朋友参考下吧
2017-07-07
vue中js判断长时间不操作界面自动退出登录(推荐)
这篇文章主要介绍了vue中js判断长时间不操作界面自动退出登录,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01