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

vue组件选项（component options）

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 {
    name:       'AddressBook',
    components: {         
      [Search.name]:        Search
    },
    props: {
      templateId: {
        type:    String,
        default: ''
      },
      version: {
        type:    Number,
        default: 0
      },
      nodeNo: {
        type:    String,
        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.loadUser = true
        this.showLoading()
        let { data } = await mine.approvalsApi.getNodeUsers({
          templateId: this.templateId,
          version:    this.version,
          nodeNo:     this.nodeNo
        })
        const result = data.data
        ......
          this.userList = result
       .......
      },
 
    }
  }
</script>
 
<style lang="less" scoped>
  @import url("./index.less");
</style>

<template>
  <div class="address-book-single">   
      <van-search
          v-model="keywords"
          :placeholder="搜索"
          @search="onSearch"
          @clear="onClear"
        />
       <!-- 人员 -->     
        <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:          [],
      }
    },
 
    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>
 

async getUsersList() {
        this.loadUser = true
        this.showLoading()
        // let { data } = await mine.approvalsApi.getNodeUsers({
        //   templateId: this.templateId,
        //   version:    this.version,
        //   nodeNo:     this.nodeNo
        // })
        // const result = data.data
 
    /*模拟多条数据测试filter方法是否正确*/
        const result = [
            {
              "id":"1826653056754913280",
              "name":"小明"
            }, 
            {
              "id":"1826",
              "name":"pk"
            },  
            {
              "id":"182665",
              "name":"PK"
            },  
            {
              "id":"18",
              "name":"小明12"
            },        
            {
              "id":"18",
              "name":"123"
            },
        ]
        if (result && result.length) {
          this.loadUser = false
          this.hideLoading()
          result.forEach((item) => {
            item.isChecked = this.checkedUser.some((uitem) => item.id === uitem.id)
          })
          if (result.length === this.checkedUser.length) {
            // 是否为全选
            this.checkedUserCount = result.length
          }
          this.userList = result
        } else if (result.length === 0) {
          this.$toast.clear()
        }
      },

 

<van-search> 组件

是 Vant（一个轻量、可靠的移动端 Vue 组件库）中的一个搜索组件，在search、input 和 clear 三个事件

1. input 事件

• 用途：每次输入时都会触发，无论输入的是文字还是进行了删除操作。
• 触发时机：每当搜索框中的值发生变化时，就会触发这个事件。
• 应用场景：实时地根据用户的输入来过滤或查询数据，实现搜索建议、即时搜索等功能。

2. search 事件

• 用途：在用户完成输入并主动触发搜索时才会触发，比如点击了搜索按钮或者按下了回车键。
• 触发时机：具体触发时机可能依赖于 <van-search> 组件的配置和具体实现，但大多数情况下，它是在用户明确表示要执行搜索操作时触发的。
• 应用场景：执行真正的搜索操作，比如向服务器发送搜索请求，获取搜索结果等。

3. clear 事件

• 用途：点击了清除按钮（通常是搜索框旁边的小叉号），意图清空搜索框中的内容时触发的。
• 触发时机：当用户点击清除按钮，意图清空搜索框中的文本时。
• 应用场景：清空搜索框绑定的数据模型，或者执行一些与清空操作相关的逻辑，比如重置搜索结果等。

总结

• input 事件用于处理用户输入过程中的每一次变化，适合实现即时搜索或搜索建议。
• search 事件用于处理用户完成输入并明确发起搜索请求的情况，适合执行真正的搜索操作。
• clear 事件用于处理用户清空搜索框的操作，适合执行与清空操作相关的逻辑。