script setup 语法糖中reactive + toRefs+解构， 如何让内部数据具有响应性?

Question

<script setup lang="ts">
import { computed, onMounted, reactive, ref, toRefs } from "vue";
const formState = () => {
  const state = reactive({
  list: [
    {
      address: '浙江省杭州市江干区丁群街556号',
      name: '蓝雅萍',
      phone: '18682072619'
    },
    {
      address: '云南省昆明市五华区正义路33-35号',
      name: '张翠佩',
      phone: '18682039451'
    },
    {
      address: '湖北省武汉市武昌区彭刘杨路215号',
      name: '李品坤',
      phone: '15732112891'
    },
  ]
  });
  return toRefs(state);
}
const { list } = formState();
// 应该怎样的写法让list具有响应式 现在list修改不能在页面更新
</script>

Answer 1

你这样写是没有问题的，list就是具有响应性的
但是为什么要写的这些复杂，这样不就可以了

const state = reactive({
  list: [
    {
      address: '浙江省杭州市江干区丁群街556号',
      name: '蓝雅萍',
      phone: '18682072619'
    },
    {
      address: '云南省昆明市五华区正义路33-35号',
      name: '张翠佩',
      phone: '18682039451'
    },
    {
      address: '湖北省武汉市武昌区彭刘杨路215号',
      name: '李品坤',
      phone: '15732112891'
    },
  ]
  });

const {list } = toRefs(state)

在线测试