Typescript vue组合api是否；“参考或反应性”；在模板上工作？

我正在为我的组件使用Vuejs Composition Api，并为我的数据使用reactive和ref

基于此，他们应该在传递给他们的对象的深层面上工作，并使其产生反应

我目前面临的一个问题是，在数据被更改后，模板似乎没有重新加载，或者它似乎不是反应性的

正如您在onmountedhook中所看到的，数据将被提取，并且在表组件中显示出来，但在datatable之前加载的预选记录不会被更新

直到我使用assignedList.length in:key强制它 重新渲染它

我不知道我哪里弄错了。我真的很困惑这些是如何工作的，我们应该如何使用它们？ 代码如下：

<template>
      <Table
        :key="assignedList.length"
        :table="dataTable"
        :pre-selected-records="assignedList"
      />
</template>

<script lang="ts">
import {
  createComponent,
  onMounted,
  PropType,
  ref
} from "@vue/composition-api";
import { DataTable } from "@/mixins/Helpers/DataTableHelper/DataTable.Helper.mixin";
import { Device} from "@/types";
import {
  api_fetchAssignedProfilesToDevice
} from "@/api/api_device";
import Table from "@/views/components/Table.vue";
import {
  mocked_assign_tableKeys,
  mocked_assign_tabs
} from "@/api/mock/assign.mock";

export default createComponent({
  name: "Assignment",
  components: {
    Table
  },
  props: {
    page: {
      type: String,
      default: "device",
      required: true
    },
    target: {
      type: Object as PropType<Device | Group>,
      required: true
    }
  },
  setup(props, context) {
    const tableKeys: { [index: string]: any } = mocked_assign_tableKeys(
      context.root.$locale
    );
    const dataTable = ref(
      new DataTable(tableKeys.profile.th, tableKeys.profile.td) as DataTable
    );
    const assignedList= ref([]);
    onMounted(async () => {
        let { assignable, assigned } = await api_fetchAssignedProfilesToDevice(
        props.target.id
      );
      await dataTable.value.fetchTableList(async () => [
        ...assignable,
        ...assigned
      ]);
      assignedList.value =assigned;
    });
    return {
      dataTable,
      assignedList,
    };
  }
});
</script>

<style lang="scss" scoped></style>

进口{
创建组件，
加上，
PropType，
裁判
}来自“@vue/compositionapi”；
从“@/mixins/Helpers/DataTableHelper/DataTable.Helper.mixin”导入{DataTable}”；
从“@/types”导入{Device}；
进口{
api_fetchAssignedProfilesToDevice
}来自“@/api/api_设备”；
从“@/views/components/Table.vue”导入表格；
进口{
模拟分配表键，
模拟\u分配\u选项卡
}来自“@/api/mock/assign.mock”；
导出默认createComponent({
名称：“任务”，
组成部分：{
桌子
},
道具：{
第页：{
类型：字符串，
默认值：“设备”，
必填项：true
},
目标：{
类型：对象作为PropType，
必填项：true
}
},
设置（道具、上下文）{
const tableKeys:{[index:string]：any}=mocked\u assign\u tableKeys(
context.root.$locale
);
常量数据表=ref(
新的DataTable（tableKeys.profile.th，tableKeys.profile.td）作为DataTable
);
const assignedList=ref（[]）；
onMounted（异步（）=>{
让{assignable，assigned}=等待api_fetchAssignedProfilesToDevice(
props.target.id
);
等待dataTable.value.fetchTableList（异步（）=>[
…可转让，
…指派
]);
assignedList.value=已分配；
});
返回{
数据表，
分配名单，
};
}
});

您找到了如何使deep objects具有反应性的方法吗？我仍然找不到正确的答案。但它似乎在对象和组件上是深度反应的，但如果您将多个深度反应作为道具传递给依赖于彼此的组件，它将无法正确传递。好的，谢谢。我也面临着一些问题。