<script lang="ts" setup> import { computed, ref } from 'vue' const search = ref('') const filterTableData = computed(() => tableData.filter( (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()) ) ) const tableData: User[] = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', } ] </script>改写成Vue3 setup形式

Vue 3 的 <script setup> 语法糖提供了一种更简洁的方式来编写组件。以下是将给定的 Vue 2 代码改写为 Vue 3 <script setup> 形式的示例：

<script lang="ts" setup>
import { ref, computed } from 'vue';

// 定义响应式引用
const search = ref('');

// 定义计算属性，根据搜索框内容过滤表格数据
const filterTableData = computed(() => {
  return tableData.filter((data) =>
    !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
  );
});

// 定义表格数据
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
];

// 定义 User 类型，用于类型检查
interface User {
  date: string;
  name: string;
  address: string;
}
</script>

这段代码使用了 Vue 3 的 <script setup> 语法，它允许我们直接在脚本块中声明响应式状态和计算属性，而无需在 setup() 函数中进行。ref 和 computed 函数从 Vue 导入，用于创建响应式引用和计算属性。tableData 是一个包含用户数据的数组，filterTableData 根据 search 的值动态过滤这些数据。此外，定义了一个 User 接口来为 tableData 中的对象提供类型检查。13