Vue3理解(9)

侦听器

浅层侦听器 

<script setup>
    import {ref,watch} from "vue"
    const data = ref('')
    watch(data, async(newQuestion,oldQuestion)=>{
        console.log('数据发生了改变')
    })

</script>

深层侦听器 

<script setup>
    import {ref,watch} from "vue"
    const data = reactive({count:0})
    watch(data, async(newQue/stion,oldQuestion)=>{
        console.log('数据发生了改变')
    },
    {deep:true}
)

</script>

 模板引用

<script setup>
    import {ref,onMounted} from "vue"
    const input= ref(null)
    
    onMounted(()=>{
        input.value.focus()
    })
</script>
<template>
    <input :ref="input">
</template>

<script setup>
    import {ref,onMounted} from "vue"
    const input= ref(null)
    
    onMounted(()=>{
        input.value.focus()
    })
</script>
<template>
    <input :ref="(el)={}">
</template>