vue3中的watch监听

watch的用法：

import { watch } from '@vue/reactivity'
watch(()=>obj.mytext,()=>{
     console.log("111")
    })

• 参数有两个，第一个：“() =>要监听的状态” ，第二个是一个回调函数；
• 代码中是监听obj.mytext值的改变；
• 每次obj.mytext改变，watch的回调函数都会触发一次；

案例：

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

    </div>
</template>
<script>
import { reactive,watch } from '@vue/reactivity'
export default {
    setup(){
        const obj=reactive({
            mytext:'',
            datalist:["aaa","abb","abc","bcc","add","bcd"],
            objlist:["aaa","abb","abc","bcc","add","bcd"]
        })
        //watch监听mytext值的变化
        watch(()=>obj.mytext,()=>{
            obj.datalist=obj.objlist.filter(item=>item.includes(obj.mytext))
        })
        return{
            obj
        }
    }
}
</script>

效果：

 

绑定input事件的用法：

• watch的方法也可以替换成@input的方式：
• @input事件：输入框的值一旦改变就会触发

<template>
    <div>
        <input type="text" v-model="obj.mytext" @input="handleInput">
        <ul>
            <li v-for="data in obj.datalist" :key="data">
                {{data}}
            </li>
        </ul>

    </div>
</template>
<script>
import { reactive } from '@vue/reactivity'
export default {
    setup(){
        const obj=reactive({
            mytext:'',
            datalist:["aaa","abb","abc","bcc","add","bcd"],
            objlist:["aaa","abb","abc","bcc","add","bcd"]
        })

        const handleInput=()=>{
            obj.datalist=obj.objlist.filter(item=>item.includes(obj.mytext))
        }
        return{
            obj,
            handleInput
        }
    }
}
</script>

效果和watch一样，只是两种不同的方法