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事件用于处理用户清空搜索框的操作，适合执行与清空操作相关的逻辑。
