vue3前端开发,watch数据侦听的基础练习

vue3前端开发,watch数据侦听的基础练习！废话不多说了，直接看代码，就可以感受到，新版本的数据侦听的效果。

第一个案例是，watch，侦听单个数据源的情况。

<script setup>
import {ref,watch} from 'vue'
const price = ref(10)
const changeHandel = ()=>{
    price.value++
}
//watch 侦听单个数据源
watch(price,(newVal,oldVal)=>{
    console.log('price变化了',newVal,oldVal);
})
</script>
<template>
    <h3>watch基础练习</h3>
    <p>草莓的单价:{{ price }}</p>
    <button @click="changeHandel">+1</button>
</template>

如图代码内容是，第一个侦听单个数据源的情况。

我们定义了一个按钮，点击可以让草莓的单价自增1.借助于watch来侦听单价的变化情况。

如图，我们点击了2次按钮，草莓单价co10元，增加到了12元，触发了2次控制台打印。正常。

下面展示的是，watch同时侦听多个数据源的情况。

<!-- <script setup>
import {ref,watch} from 'vue'
const price = ref(10)
const changeHandel = ()=>{
    price.value++
}
//watch 侦听单个数据源
watch(price,(newVal,oldVal)=>{
    console.log('price变化了',newVal,oldVal);
})
</script> -->
<script setup>
import {ref,watch} from 'vue'
//草莓单价
const price = ref(10)
//购物车货品数量
const count = ref(0)
//修改草莓单价
const addPrice = ()=>{
    price.value++
}
//修改购物车货品总数
const changeHandel=()=>{
    count.value++
}
//watch同时侦听2个数据源的变化案例
watch([price,count],([newPrice,newCount],[oldPrice,oldCount])=>{
    console.log('单价发生变化了或者数量发生变化了')
    console.log('新单价是'+newPrice);
    console.log('新总数量是'+newCount);
})
</script>
<template>
    <h3>watch基础练习</h3>
    <p>草莓的单价:{{ price }}</p>
    <p>购物车总数量:{{ count }}</p>
    <button @click="addPrice">单价价格+1</button>
    <button @click="changeHandel">货物数量+1</button>
</template>

我们定义了2个按钮，一个是修改购物车内货品的总数量，一个是修改草莓的单价。

无论我们点击哪个按钮，都会触发数据的变化。在控制台打印出来对应的信息。如下图所示。

如图，我们点击后，无论是单价变化，还是总数变化，都会触发watch。