Vue 3 侦听属性

犬小哈 2023-10-02 17:01:53

在 Vue 中，侦听属性允许你在数据变化时执行一些自定义操作，使得它成为处理同步、异步逻辑以及与服务器交互的理想选择。在本文小节中，我们就来学习一下侦听属性，了解它的基本概念、用法，以及它的适用场景。

一、什么是侦听属性？

侦听属性允许你监视一个数据，并在数据变化时执行自定义的操作。这个操作可以是同步的，也可以是异步的，比如异步请求、数据持久化、动画等等。

二、适用场景

异步操作：侦听属性允许执行异步操作，处理需要与服务器端或其他异步任务交互的逻辑。
自定义逻辑：侦听属性使得你可以在数据变化时触发指定函数，例如触发动画、保存数据等。
动态响应：侦听属性能够动态地响应数据的变化，无需手动监听 DOM 事件或定时器。

三、基本用法

以下是一个侦听属性的基本示例：

<template>
  <div>
    <input v-model="inputText">
  </div>
</template>

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

// 输入框内容
const inputText = ref('')

watch(inputText, (newText, oldText) => {
  console.log(`新值: ${newText}, 老值: ${oldText}`)
})

</script>

在这个例子中，我们通过watch选项定义了一个侦听属性，它会监视inputText属性的变化，并在每次变化时打印日志，包括当前值和变更前的老值。

四、监听查询关键词筛选书本

接下来，我们通过侦听属性来实现一个根据用户输入的查询关键词，来筛选对应书本的功能，代码如下：

<template>
  <div>
    <input v-model="searchText" placeholder="请输入查询关键词" />
    <ul>
      <li v-for="(item, index) in searchBooks" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

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

const books = [
  '犬小哈教程',
  'Java 教程',
  'Vue3 项目实战',
  'Spring Boot 项目实战',
]

// 查询关键词
const searchText = ref('')
// 筛选后的书籍
const searchBooks = ref([])

// 侦听属性
watch(searchText, (s) => {
  searchBooks.value = books.filter(book => book.includes(s))
})
</script>

在这个例子中，通过侦听属性对 searchText 属性监听，每当输入关键词变化时，都会对 books 数组进行筛选，并将包含关键词的书籍赋值给 searchBooks , 最终实现了实时搜索的效果。