使用 watch 观察数据变化

watch 语法

watch(被观察变量, (新值, 旧值)=>{
    // 函数逻辑
})

示例 :

<template>
	<div>
		<button @click="counter">点击计数 : {{count}}</button>
	</div>
	<div>
		{{user.name}}
	</div>
</template>
<script setup>
import {ref, reactive, watch} from "Vue";
const count = ref(0);
const user  = reactive({
	name : "LessCode",
	age  : 10
});
const counter = ()=>{
	count.value ++;
	user.name = 'test';
};
watch(count, (newVal, oldVal)=>{
	console.log(newVal, oldVal);
});
watch(user, (newVal, oldVal)=>{
	console.log(newVal, oldVal);
});
</script>