vue3中ref、reactive的使用示例

• ref

1、导入

import {  ref } from "vue";

2、定义

// 报告表格数据

const reportTableData = ref<Report[]>([]);

3、赋值

// 获取报告信息

let result = await reportDataByOuterApplyIdService(tableSelectedRow.value?.outerApplyId);

reportTableData.value = result.data;

// 清空报告信息

reportTableData.value = [];

4、模板引用

<el-table :data="reportTableData" />

• reactive

1、导入

import {  reactive } from "vue";

2、定义

// 报告表格数据

const reportTableData = reactive<Report[]>([]);

3、赋值

// 获取报告信息

let result = await reportDataByOuterApplyIdService(tableSelectedRow.value?.outerApplyId);

reportTableData.splice(0, result.data.length, ...result.data);

// 清空报告信息

reportTableData.length = 0;

4、模板引用

<el-table :data="reportTableData" />