<script lang="ts" setup> import { computed, ref } from 'vue' interface User { date: string name: string address: string } const search = ref('') const filterTableData = computed(() => tableData.filter( (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()) ) ) const handleEdit = (index: number, row: User) => { console.log(index, row) } const handleDelete = (index: number, row: User) => { console.log(index, row) } const tableData: User[] = [ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-04', name: 'Morgan', address: 'No. 189, Grove St, Los Angeles', }, { date: '2016-05-01', name: 'Jessy', address: 'No. 189, Grove St, Los Angeles', }, ] </script>改写成

Vue3 Composition API 改写

Vue3 的 Composition API 通过 <script setup> 语法糖简化了组件的编写方式。以下是将给定的 Vue 组件代码改写为使用 Composition API 的示例。

使用 Composition API 改写

• 定义响应式引用：使用 ref 来创建响应式的 search 引用。
• 创建计算属性：使用 computed 来根据 search 的值过滤 tableData。
• 定义方法：使用箭头函数定义 handleEdit 和 handleDelete 方法。
• 定义数据数组：直接定义 tableData 数组，包含用户数据。

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

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

const search = ref('');
const tableData = ref([
  // ... 同上用户数据数组
]);

const filterTableData = computed(() =>
  tableData.value.filter(
    data =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);

const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};

const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};
</script>

要点说明

• 使用 <script setup> 语法糖，无需返回对象即可在模板中直接使用定义的响应式引用、计算属性和方法。
• ref 用于创建响应式的引用，computed 用于创建基于响应式引用的计算属性。
• 定义的方法可以直接在模板中通过事件绑定使用。
• 数据数组 tableData 也使用 ref 封装，以确保其响应性。67