Vue3数据无法显示/数据无法修改

问题描述：

昨天朋友问了我一个关于Vue3的问题，给他解答后，想起貌似自己当初也曾被这个问题困惑过，只不过被善用搜索引擎后找到了问题所在。

现在考虑到可能有些朋友搜不到解决方法，所以现在用它的表现形式作为标题，可能更便于搜索到。

现在重现一下这个问题：

<div v-for="(item,idx) in list" :key="idx">
  {{ item }}
</div>

<script setup>
let list = [];

onMounted(() => {
  // 在这里给 list 赋值
})
</script>

代码的思路为：声明一个名为list数组，在组件初始化时，获取值并赋值到list数组中存储，然后在组件中渲染出来。

但是最后数据并没有显示，这个问题一般会出现在刚接触 Vue 或刚刚从 Vue2 转到 Vue3 的人身上。

问题原因：

问题的原因在于前面的list数组并不是响应式的，Vue2 和 Vue3 声明响应式的方式不同，在 Vue2 中

<script>
export default {
  data() {
    return {
	list: [],  //此时 list 是响应式的，对 list 的值进行修改，页面中对应的数据也会进行变化。
	text: ""  //此时 text 也是响应式的。
    }
  }
}
</script>

但在 Vue3 中

<script setup>
let list = []  //此时 list 不是响应式的，对 list 的值进行修改，页面中对应的数据不会进行变化。
let text = ""  //此时 text 也不是响应式的
</script>

Vue3 中正确的声明响应式：

<script setup>
import { ref,reactive } from 'vue'

let list = reactive([])  //此时 list 是响应式的
let text = ref("")  //此时 text 是响应式的
</script>

具体可以去看 Vue3 官方文档中基础 - 响应式基础这部分。

总结：

数据无法显示/数据无法修改是因为该变量不是响应式的，前面由于list数组为空，所以才没有数据显示，且由于它不是响应式的，后面对list数组进行的任何修改，都不会使Dom更新。