Vue学习笔记VCA的computed和watch

import { computed, ref } from 'vue'

function UseSearch(datalist) {
    const keyword = ref('')
    const mydatalist = computed(() => datalist.value.filter((item) => item.includes(keyword.value)))
    keyword.value = ''
    return {
        mydatalist,
        keyword
    }
}
export default UseSearch

<template>
    <div>过滤</div>
    <input v-model="keyword">
    <ul>
        <li v-for="data in mydatalist">{{ data }}</li>
    </ul>
</template>
<script>
import { reactive, ref} from 'vue';
import useSearch from './UseSearch.js'

export default {
    setup() {
        const datalist=ref([])

        setTimeout(datalist.value=['fk98h', 'bjhiosw', 'oitd', 'j7jh', 'g98', 'zxvhp', 'h4dh09'],2000)
        return {
            ...useSearch(datalist)
        }
    }
}
</script>

<template>
    <div>watch</div>
    <input type="text" v-model="mytext">
    <select v-model="myselect">
        <option v-for="s in myoption">{{ s }}</option>
    </select>
</template>
<script>
import { reactive, ref, watch } from 'vue';

export default {
    setup() {
        const mytext = ref("")
        const myselect = ref("")
        const myoption = ref(["a", "b", "c"])
        watch([mytext,myselect], (newValue, oldValue) => {
            console.log("监控watch", newValue, oldValue)
        })
        return {
            mytext,
            myselect,
            myoption
        }
    }
}