前言
Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。它提供了一种简洁的方式来创建可维护和可测试的前端应用程序。Vue.js 的核心库只关注视图层，易于上手，同时与其他库或现有项目整合也非常方便。Vue 也完全能够为复杂的单页应用提供驱动。
在 Vue 3 中，引入了 <script setup> 语法，这是一种更简洁、更快速的方式来编写组件。这种语法使得组件的编写变得更加简单和直观，同时也提高了代码的可读性和维护性。
在这个例子中，我们将使用 Vue 3 和 <script setup> 语法来创建一个简单的搜索组件，展示如何利用 Vue 的响应式系统和计算属性来实现实时搜索功能。
用法
<template> <div> <input v-model="searchQuery" placeholder="Search..." /> <ul v-if="filteredData.length > 0"> <li v-for="item in filteredData" :key="item.id"> {{ item.title }} - {{ item.nickname }} </li> </ul> <p v-else>No results found</p> </div> </template>
1. <template> 区域
在 <template> 区域中，我们定义了组件的 HTML 结构：
- 一个 input 元素，用于输入搜索查询。我们使用 v-model 指令将其值双向绑定到 searchQuery 变量。
- 一个 ul 列表，用于显示搜索结果。我们使用 v-if 指令来判断 filteredData 数组是否有内容，如果有，就显示搜索结果。
- 在 ul 列表内部，我们使用 v-for 指令来遍历 filteredData 数组，并为每个结果创建一个 li 元素。
- 如果 filteredData 数组为空，我们显示一条 "No results found" 的消息。
<script setup> import { ref, computed } from 'vue'; const searchQuery = ref(''); const data = ref([ { "id": 89, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092410299525", "create_time": "2023-09-24 19:52:47", "status": 1, "nickname": "昵称", "tel": "1527", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" }, { "id": 88, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092499519710", "create_time": "2023-09-24 08:48:44", "status": 1, "nickname": "昵称", "tel": "663177", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" }, { "id": 87, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092497515653", "create_time": "2023-09-24 08:44:42", "status": 1, "nickname": "昵称", "tel": "1523", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" }, { "id": 86, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092457100101", "create_time": "2023-09-24 08:44:41", "status": 1, "nickname": "昵称", "tel": "152366", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" }, { "id": 85, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092448101101", "create_time": "2023-09-24 08:40:32", "status": 1, "nickname": "昵称", "tel": "152366", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" }, ]); const filteredData = computed(() => { if (!searchQuery.value) { return data.value; } return data.value.filter(item => { return Object.values(item).some(value => value.toString().toLowerCase().includes(searchQuery.value.toLowerCase()) ); }); }); </script>
2. <script setup> 区域
在 <script setup> 区域中，我们定义了组件的 JavaScript 逻辑：
- 首先，我们从 vue 中导入了 ref 和 computed 函数。
- 然后，我们定义了 searchQuery 变量，用 ref 函数创建一个响应式引用，并初始化为空字符串。
- 我们还定义了 data 变量，用 ref 函数创建一个响应式引用，并初始化为给定的假数据数组。
- 接下来，我们定义了 filteredData 计算属性，它根据 searchQuery 的值来过滤 data 数组，并返回匹配的结果。我们使用 Object.values(item).some() 来检查对象中的所有值是否有任何一个包含搜索字符串。
理解
1. 响应式系统
Vue 的响应式系统是其核心特性之一。在这个例子中，searchQuery 和 data 都是响应式引用，这意味着当它们的值发生变化时，Vue 会自动重新渲染组件。这使得我们能够实现实时搜索功能，用户在输入框中输入时，搜索结果会立即更新。
2. 计算属性
filteredData 是一个计算属性，它依赖于 searchQuery 和 data 的值。当这些依赖项的值发生变化时，Vue 会自动重新计算 filteredData 的值。计算属性是缓存的，只有当其依赖项发生变化时，它们的值才会被重新计算。这使得计算属性非常高效，特别是当进行复杂计算或过滤大量数据时。
3. <script setup> 语法
<script setup> 语法是 Vue 3 中引入的一种新的组件编写方式。它提供了一种更简洁、更快速的方式来定义组件。在 <script setup> 中，我们可以直接定义组件的 props、setup 函数和其他组合式 API，无需使用 export default 来导出组件对象。这种语法使得组件的结构更加清。
完整代码
<template> <div> <input v-model="searchQuery" placeholder="Search..." /> <ul v-if="filteredData.length > 0"> <li v-for="item in filteredData" :key="item.id"> {{ item.title }} - {{ item.nickname }} </li> </ul> <p v-else>No results found</p> </div> </template> <script setup> import { ref, computed } from 'vue'; const searchQuery = ref(''); const data = ref([ { "id": 89, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092410299525", "create_time": "2023-09-24 19:52:47", "status": 1, "nickname": "昵称", "tel": "1527", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" }, { "id": 88, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092499519710", "create_time": "2023-09-24 08:48:44", "status": 1, "nickname": "昵称", "tel": "15236", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" }, { "id": 87, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092497515653", "create_time": "2023-09-24 08:44:42", "status": 1, "nickname": "昵称", "tel": "1577", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" }, { "id": 86, "shopid": 13, "userid": 21, "total": "99.00", "num": "1", "ord_num": "2023092457100101", "create_time": "2023-09-24 08:44:41", "status": 1, "nickname": "昵称", "tel": "177", "title": "11苹果11双卡全面屏苹果手机", "price": "99.00", "info": "推荐购买" } ]); const filteredData = computed(() => { if (!searchQuery.value) { return data.value; } return data.value.filter(item => { return Object.values(item).some(value => value.toString().toLowerCase().includes(searchQuery.value.toLowerCase()) ); }); }); </script>
原理
- 定义响应式变量：使用
ref或reactive创建响应式变量，用于存储搜索关键词、过滤条件和搜索结果。 - 编写搜索逻辑：在
setup函数中创建一个处理搜索的函数。该函数可以根据搜索关键词和其他条件对数据进行过滤，并将结果存储在响应式变量中。 - 在模板中使用搜索功能：将搜索关键词绑定到输入框，并在触发搜索时调用
search函数。然后，显示搜索结果。
