vue搜索框过滤--- computed、watch区别

小米渣aa

已于 2024-07-26 11:10:56 修改

阅读量417

点赞数 8

文章标签： vue.js 前端 javascript

于 2024-07-16 17:56:11 首次发布

本文链接：https://blog.csdn.net/weixin_64912130/article/details/140472436

版权

vue组件选项（component options）

注意：computed能完成的，watch都能完成，watch能完成的功能，computed不一定能完成，比如异步操作。

1. computed（计算属性）

用途：computed属性用于声明性地描述一些依赖其它响应式属性的数据。当依赖的响应式属性变化时，计算属性会自动重新求值。
缓存：计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生改变时才会重新求值。
声明方式：在组件的computed选项中声明，返回一个计算值。
场景：适合用在模板渲染中，或者任何需要根据组件状态变化而变化的数据上。

2. watch（侦听器）

用途：watch用于观察和响应Vue实例上数据的变动。当指定的数据发生变化时，可以执行异步操作或开销较大的操作。
无缓存：与计算属性不同，watch不会缓存结果。每次指定的数据发生变化时，都会执行相应的回调。
声明方式：在组件的watch选项中声明，为每个需要观察的数据提供一个回调函数。
场景：适合在数据变化时执行异步或开销较大的操作，如数据验证、发送请求等。

3. methods（方法）

用途：methods定义了组件的具体行为，即可以在组件的模板中调用，或在组件的其它逻辑中调用的函数。
无缓存：与watch类似，methods中的函数在每次调用时都会执行，而不会缓存结果。
声明方式：在组件的methods选项中声明，可以包含任何逻辑。
场景：适合定义任何类型的函数，包括事件处理函数、业务逻辑函数等。

总结

计算属性（computed）适用于需要基于其他数据动态变化，并且需要缓存的场景。
侦听器（watch）适用于需要响应数据变化，执行异步或开销较大操作的场景。
方法（methods）适用于定义组件的具体行为，包括事件处理和业务逻辑等。

<template>
  <div class="address-book-single">   
      <van-search
          v-model="keywords"
          :placeholder="搜索"
        />
       <!-- 人员 -->     
        <div v-for="(item, index) in filteredList" :key="item.id"> 
         {{ item.name }}          
        </div>      
  </div>
</template>

<script>
  import { Search} from 'vant'
  export default {
    ....
    data() {
      return {
        userList:              [],       
        keywords:              '', // 搜索名称
       //不需要filterdeList:           [],
       /*在computed选项中定义计算属性时，不需要显式地在组件的data函数中声明，
       因为它不是组件的原始状态数据，而是基于组件状态数据计算得出的结果。*/
      }
    },

    computed: {    
      filteredList(){
        return this.keywords ? this.userList.filter(item=>
               item.name.toLowerCase().includes(this.keywords.toLowerCase())) : this.userList
      }
    },

    mounted() {
      this.getUsersList()
    },

    methods: {
      async getUsersList() {
      ......
          this.userList = result
       .......
      },

    }
  }
</script>

<template>
  <div class="address-book-single">   
      <van-search
          v-model="keywords"
          @search="onSearch"
          @clear="onClear"
        />
       <!-- 人员 -->     
        <div v-for="(item, index) in filteredList" :key="item.id"> 
         {{ item.name }}          
        </div>      
  </div>
</template>

<script>
  export default {
   ......
    data() {
      return {
        userList:              [],       
        keywords:              '', // 搜索名称
        filterdeList:          [],
      }
    },
    mounted() {
      this.getUsersList()
    },
    methods: {
      async getUsersList() {
        ......
          this.userList = result
          this.filteredList = this.userList
       .......
      },
      //搜索框过滤
      onSearch() {
        this.filteredList = this.userList.filter(item=>
           item.name.toLowerCase().includes(this.keywords.toLowerCase()))
      },
      onClear(){
        this.getUsersList()
      }
    }
  }
</script>