reactive+ts 空

如何在ts中使用vue3语法糖(setup)里的reactive()来定义一个空数组,内容是对象

基于Monster 组和GPT的调写
用setup()方法和reactive()函数来定义一个空数组，内容是对象。

import { reactive } from 'vue';

export default {
  setup() {
    const myArray = reactive<Array<{ id: number, name: string }>>([]);

    // 在这里可以对 myArray 进行增删改查等操作

    return {
      myArray
    };
  }
}

用import语句导入了reactive函数，然后在setup()方法中使用reactive()函数来定义了一个名为myArray的响应式数组，其内容为对象，对象包含两个属性id和name。在定义完myArray后，可以对其进行增删改查等操作。

最后，通过return语句将myArray暴露出去，以便在模板中使用。

• 这篇博客: Vue3+Ts小案例-实现追踪鼠标（reactive改写）中的 reactive重写Ts 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 可以看到在上面的ts文件中， const x = ref(0) const y = ref(0)都是使用单个的ref形式，我们在了解reactive之后就可以来进行重写，关于ref和reactive用法，可以参考博客 Vue3中ref和reactive的使用方法及区别
  reactive重写之后的Ts代码：

  import { ref, onMounted, onUnmounted, reactive, toRefs} from 'vue'
  interface DataPros {
    x: number,
    y: number
  }
  function useMousePosition() {
      const data: DataPros = reactive({
        x: 0,
        y: 0
      })
      const updateMouse = (e: MouseEvent) => {
        data.x = e.pageX
        data.y = e.pageY
      }
      onMounted(() => {
        document.addEventListener('click', updateMouse)
        console.log(refData1)
      })
      onUnmounted(() => {
        document.addEventListener('click', updateMouse)
        console.log(refData1)
      })
      const refData1 = toRefs(data)
      return { refData1 }
  }
  
  export default useMousePosition
  

  先定义一个interface规范变量的形式，然后定义一个data存放x和y，因为reactive接收一个obj返回时会丧失响应性，所以我们这里利用toRefs来进行转换，保留响应性。

  怎么样，使用reactive是不是使代码整体看起来可读性规范性更高呢？