Vue3 中 script setup 到底要不要加 .value

先来看看下面这端代码 

<script setup>

let tableData = ref([]);

const queryUserList = async (params) => {

  const { data: res } = await useretListApi({});

  console.log(`接口里所有的数据:`, res.data);

  console.log(`接口里我想要的数据:`, res.data.rows);

  tableData = res.data.rows;

  // 接口返回的数据赋值给了 tableData，但是这个 tableData
  // 不是之前定义的响应式变量，
  // 而是一个普通的变量，
  // 这样就导致了这个变量不会触发视图的更新。正确的做法应该是将接口返回的数据赋值给之前定义的响变量
  // tableData，即 tableData.value = res.data.rows。

  console.log(tableData);

  tableData.value = res.data.rows; //或者加上.value

  console.log(`我定义的接口`, tableData);

  console.log("看看userGetListApi()里面的内容", await userGetListApi({}));

};
</script>

明明我定义了一个响应式变量 let tableData = ref([]);

但是我赋值的时候还是   tableData.value = res.data.rows; //还是加上了value

那愿意是什么呢？ 

使用响应式变量 ref，你可以通过访问 tableData.value 访问实际的数组值，并且修改 tableData.value 时，Vue 会检测到变量的变化并更新视图。

在 <script setup> 语法中，Vue 会自动将响应式变量转化成普通的变量，因此你可以直接使用 tableData 而无需使用 tableData.value。但是，如果你需要修改 tableData 的值并希望视图更新，你仍然需要使用 tableData.value。

在 Vue.js 3 中，<script setup> 语法可以让我们更方便地定义组件的逻辑，其中使用的变量都是响应式的，即如果我们修改了这些变量的值，Vue.js 会自动检测到变化并更新视图。而在 <script setup> 中使用的变量，Vue.js 会自动将其转化为普通的变量，这样可以避免出现一些非预期的响应式行为，例如可能导致组件性能下降的监听器嵌套。

所以，在 <script setup> 中，你可以直接使用 tableData 这样的变量名，因为它已经被 Vue.js 转化为普通的变量了。但是，如果你想修改 tableData 的值，并且希望这个修改能够触发视图的更新，你需要使用 tableData.value，因为这样才能让 Vue.js 监测到值的变化并进行相应的更新。因此，<script setup> 中的变量使用方式与普通的变量不同，需要根据具体的使用场景来决定是否需要使用 .value。

这样就没问题了，这个问题网页上的渲染的数据只能通过手动修改代码来渲染，刷新又会失效，

原来是没加上.value