vue3 用计算属性写个搜索功能

在 Vue3 中，可以使用新的 ref 和 reactive 来定义响应式数据。同时，计算属性也有了一些改变。

下面是一个使用计算属性实现搜索功能的示例：

<template>
  <div>
    <input type="text" v-model="searchText" placeholder="输入关键字搜索">
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
  import { ref, computed } from 'vue';

  export default {
    setup() {
      const list = ref([
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
        { id: 4, name: '赵六' },
      ]);
      const searchText = ref('');

      const filteredList = computed(() => {
        return list.value.filter(item => {
          return item.name.includes(searchText.value);
        });
      });

      return {
        searchText,
        filteredList,
      };
    },
  };
</script>

在上面的示例中，我们通过 ref 定义了一个响应式数组 list，并且通过 ref 定义了一个响应式字符串 searchText，用于保存用户输入的关键字。然后，我们使用 computed 计算属性，根据 searchText 和 list 过滤出符合条件的数据，返回一个新的数组 filteredList。

在模板中，我们使用 v-model 绑定用户输入的关键字到 searchText 上，并在 v-for 中遍历 filteredList 显示列表项