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-searchv-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 = truethis.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-searchv-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 = resultthis.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 = truethis.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 = falsethis.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()}},