<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 js语言形式

Vue 3 中使用 <script setup> 语法糖，可以简化组件的编写。以下是将给定的 Vue 2 代码改写为 Vue 3 <script setup> 形式的示例：

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

interface User {
  date: string;
  name: string;
  address: string;
}

const search = ref('');
const tableData = ref<User[]>([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]);

const filterTableData = computed(() => {
  return tableData.value.filter((data) =>
    !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
  );
});
</script>

这段代码中，<script setup> 语法糖允许我们直接在模板中使用 search 和 filterTableData，无需额外的 export 声明。同时，定义了 User 接口来描述 tableData 数组中对象的结构。34