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

欢迎访问我的 个人博客

最早学习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)