vue.js数据渲染完成后,获取页面高度问题

本文记录了在使用Vue框架进行数据展示时遇到的数据渲染延迟问题,详细解释了为何在数据更新后立即获取元素高度会得到0值,并提供了解决方案——利用Vue的$nextTick方法确保DOM更新后再进行操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

欢迎访问我的 个人博客

最早学习vue时遇到一点问题,做个记录。

遇到的问题

通过接口请求出来的数据,渲染到页面上,再获取元素内容高度的时候,高度为0

为什么高度会是0

因为我是在接口返回数据后,就直接在回调函数里获取了元素内容的高度。虽然数据获取到了,但是页面还没有及时的渲染出来,所以获取的内容高度就为0了

使用 $nextTick 方法解决问题

vue官网$nextTick方法介绍

为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

部分代码示例一:

mounted() {
    this.getDataList(); //调用方法
},
methods: {
    //获取数据列表
    getDataList() {
        const that = this;
        axios.get('http://localhost/blog/api/article/getList?currentPage=1&keywords=')
            .then(function (res) {

                that.dataList = res.data.data; //将获取到的数据赋值给 dataList

                const content = that.$refs.content; //通过ref 找到该元素

                console.log(content.offsetHeight); // 0

                //使用$nextTick方法
                that.$nextTick(() => {
                    console.log(content.offsetHeight); // 600
                });

            })
            .catch(function (err) {
                console.log(err);
            });
    }
}

部分代码示例二:

mounted() {
    this.getDataList(); //调用方法
},
//监听事件
watch: {
    //dataList的值改变后会执行 
    dataList(newData, oldData) {
        console.log(newData);
        console.log(oldData);

        const content = this.$refs.content; //通过ref 找到该元素

        console.log(content.offsetHeight); // 0

        //使用$nextTick方法
        this.$nextTick(() => {
            console.log(content.offsetHeight); // 600
        })
    }
},
methods: {
    //获取数据列表
    getDataList() {
        const that = this;
        axios.get('http://localhost/blog/api/article/getList?currentPage=1&keywords=')
            .then(function (res) {
                that.dataList = res.data.data; //将获取到的数据赋值给 dataList
            })
            .catch(function (err) {
                console.log(err);
            });
    }
}

视图渲染是在异步宏任务之前,所以也可以用 setTimeout(fn, 0)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值