当前位置：首页 > article >正文

组合式API_侦听器

article 2025/2/27 1:53:38

选项式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);
   })
}