vue3 +ts 动态绑定 响应式数组

看这段代码，先定义接口，然后再定义ref：

//定义ts 接口类型

interface editFormDataType {

  label: string | number | boolean

  value: string | number | boolean

  prop: string

}

//需要绑定变量

editFormData

方法一: ref

//定义变量

  const editFormData = ref([] as editFormDataType[])

  // 使用

  editFormData.value = [

          {

            label: '客户名称',

            value: '',

            prop: ''

          },

          {

            label: '单号',

            value: '',

            prop: ''

          }

   ]

方法二: ref

//定义变量

  const editFormData: editFormDataType[] = reactive([])

  // 使用 添加数组

  editFormData.push(

  ...[

          {

            label: '客户名称',

            value: '',

            prop: ''

          },

          {

            label: '单号',

            value: '',

            prop: ''

          }

   ]

  )

  //修改数组

   editFormData.splice(0, 1, {

        label: '备注',

        value: '',

        prop: ''

      })

  //清空数组

  editFormData.length = 0;

方法三: ref

   const state = reactive({

      editFormData: [] as editFormDataType[]

    })

    state.editFormData = [

      {

        label: '客户名称',

        value: '',

        prop: ''

      },

      {

        label: '单号',

        value: '',

        prop: ''

      }

    ]