选项式API_侦听器
<template>
<h3>选项式API</h3>
<p>{{ count }}</p>
<button @click="addCountHandle">增加</button>
</template>
<script>
export default {
data(){
return{
count:0
}
},
methods:{
addCountHandle(){
this.count++
}
},
watch:{
count(newValue,oldValue){
console.log(newValue,oldValue);
}
}
}
</script>
组合式API_侦听器
<template>
<h3>组合式API</h3>
<p>{{ count }}</p>
<button @click="addCountHandle">增加</button>
</template>
<script setup>
import { ref,watch } from "vue"
const count = ref(0)
function addCountHandle(){
count.value++
}
watch(count,async(newValue,oldValue) =>{
console.log(newValue,oldValue);
})
</script>
提取到独立文件
import { watch } from "vue"
export function countUtil(count){
watch(count,async(newValue,oldValue) =>{
console.log(newValue,oldValue);
})
}