vue3中自定义简易版hooks，computed筛选

一、默认computed筛选方式

<template>
    <div>
        <input type="text" v-model="mytext">

        <ul>
            <li v-for="data in computedList" :key="data">
            {{data}}
            </li>
        </ul>
    </div>
</template>

<script>
import { reactive,toRefs, computed } from 'vue';

export default {
    setup(){
        const state = reactive({
            mytext:"",
            datalist:["aaa","aab","abc","bbc","bcd","aef","bdf","cde"]
        })

        const computedList = computed(()=>
            state.datalist.filter(item=>item.includes(state.mytext))
        )
        return {
            computedList,
            ...toRefs(state)  //转化陈ref  响应式
        }
    }
}
</script>

二、改造代码 自定义筛选过滤 hooks

vue文件：

<template>
    <div>
        <input type="text" v-model="mytext">
        <ul>
            <li v-for="data in computedList" :key="data">
                {{ data }}
            </li>
        </ul>
    </div>
</template>

<script>
import {  ref } from 'vue';
//自定义的hooks
import useSearch from './search'  //过滤
export default {
    setup() {
        const datalist = ref([])

        setTimeout(() => {
            datalist.value = ["aaa", "aab", "abc", "sdew", "rtea", "aef", "bdf", "cde"]
        }, 2000)

        return {
            ...useSearch(datalist)
        }
    }
}
</script>

search.js

import { ref,computed } from 'vue';


function UseSearch(datalist) {
    const mytext = ref("")
    const computedList = computed(() =>
        datalist.value.filter(item => item.includes(mytext.value))
    )

    return {
        mytext,
        computedList
    }
}

export default UseSearch

效果图

原文地址：https://blog.csdn.net/weixin_43857653/article/details/135992951

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！