vue3 watch方法---監視基本型別資料

洛飞發表於2024-10-06
Vue型別

watch 監聽定義的資料發生改變的時候執行什麼函式

watch 方法有兩個引數 watch(sum，箭頭函式)

這個箭頭函式里面有兩個引數(newValue,oldValue)=> {},如下程式碼

<template>
    <!-- 
        watch；監視資料變化 
        vue3 可以監視一下四種資料型別：
        ref定義的資料
        reactive  定義的資料
        函式返回一個值
        一個包含上述內容的陣列
    -->
    <div class="person">
        當前和:{{ sum }}
        <button @click="add">點我加一</button>
    </div>
</template>
<script setup lang="ts">
// 需求：當值大於多少時，執行什麼操作
import { ref,watch } from "vue";
let sum = ref(0);
function add() {
    sum.value++;
}
//監視
watch(sum, (newValue,oldValue)=>{
    console.log(newValue, oldValue);
    
})
</script>

<style scoped>
.person {
    background: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
button {
    margin: 0 5px;
}
</style>

解除監視：自己呼叫自己就可以解除監視,watch返回的是一個函式，只需將watch賦值給一個變數，再呼叫即可。

當sum的值大於5的時候，不進行監視了

//監視
let stopWatch = watch(sum, (newValue,oldValue)=>{
    console.log(newValue, oldValue);
    if (newValue > 5) {
        stopWatch();
    }
})

相關文章