vue3.0项目中，成功获取后端数据，却发现渲染失败，页面还是没数据？

最新推荐文章于 2025-01-04 17:04:26 发布

原创最新推荐文章于 2025-01-04 17:04:26 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端专栏收录该内容

5 篇文章

订阅专栏

本文分析了在Vue中，如何通过ref()和reactive()实现响应式数据绑定，解释了渲染失败的原因——数据未被正确地响应式处理，以及解决方法。作者推荐使用ref()来简化代码并保持响应性。

建议先看下这篇：简析vue中的声明式渲染&响应式，ref()&reactive()-优快云博客

渲染失败的原因，是你声明的东西，不具备响应性，或者响应性丢失。

甚至，你在console打印出来，的确有值，为什么页面没有加载出来？因为响应性不存在的情况下，HTML不会检测任何变量&常量的变化，即使它真的变化了，但不会进行检测，仍然使用最开始的值，所以渲染失败，页面没有数据。

解决的办法：赋予响应性即可，使用ref()或者reactive()。

注：el-tree是element-plus的树形组件，无须过多关注，利用其它组件完成视图部分即可，建议后续再深入。

<template>
  <el-tree :data="resData" :props="defaultProps" />
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue'

const resData = ref<Tree[]>([]) // 赋予响应性
const getData = async () => {
  axios.get('/product/category/treeList')
    .then(response => {
      resData.value = response.data.tree
    });
  console.log(resData)
}

getData() // 记得一定要调用，上面是声明

interface Tree {
  name: string
  children?: Tree[]
}
const defaultProps = {
  children: 'children',
  label: 'name',
}
</script>

或者：

<template>
  <el-tree :data="resData" :props="defaultProps" />
</template>

<script lang="ts" setup>
import axios from 'axios';
import { reactive } from 'vue'

const resData = reactive<Tree[]>([]) // 赋予响应性
const getData = async () => {
  axios.get('/product/category/treeList')
    .then(response => {
      for (let i = 0; i < response.data.tree; i++) {
        resData.push({
          name: response.data.tree[i].name,
          children: response.data.tree[i].children
        })
      }
    });
  console.log(resData)
}

getData() // 记得一定要调用，上面是声明

interface Tree {
  name: string
  children?: Tree[]
}
const defaultProps = {
  children: 'children',
  label: 'name',
}
</script>

很明显，ref更简洁，同时reactive，对响应性的维持，更加苛刻，需要借助push等函数。

总而言之，建议使用ref()。