使用Vue3的watch实现数据的实时更新(附详细代码)

<template>
  <button class="style" @click="num++">增加watch</button>
</template>

<script setup>
import { watch, ref } from "vue";
const num = ref(1);
// newVal: 新值 | oldVal: 旧值
watch(num, (newVal, oldVal) => {
  console.log(`新值:${newVal} --- 旧值:${oldVal}`);
});
</script>
<style lang="scss" scoped>
.style {
  margin: 20px 20px;
}
</style>

<template>
  <h1 class="style">{{ one }} | {{ two }}</h1>
  <button class="style" @click="one++">增加one的值</button>
  <button class="style" @click="two++">增加two的值</button>
</template>

<script setup>
import { watch, ref } from "vue";
const one = ref(0);
const two = ref(10);
// newVal: 新值 | oldVal: 旧值
watch([one, two], ([newVal, oldVal]) => {
  console.log(`新值:${newVal} --- 旧值:${oldVal}`);
});
</script>
<style lang="scss" scoped>
.style {
  margin: 10px 20px;
}
</style>

<template>
  <h1 class="style">{{ num.number }}</h1>
  <h1 class="style">{{ num.age }}</h1>
  <button class="style" @click="num.number++">增加number的值</button>
</template>

<script setup>
import { watch,ref } from "vue";
const num = ref({
  number: 1,
  age: 18,
});
// newVal: 新值 | oldVal: 旧值

// 这个侦听器无效，即控制台无输出
watch(num, (newVal, oldVal) => {
  console.log("侦听器1：", newVal, oldVal);
});

// getter函数形式，新旧值不一样
watch(
  () => ({ ...num.value }),
  (newVal, oldVal) => {
    console.log("侦听器2：", newVal, oldVal);
  }
);
</script>
<style lang="scss" scoped>
.style {
  margin: 10px 20px;
}
</style>

<template>
  <h1 class="style">{{ num.value }}</h1>
  <button class="style" @click="num.value++">增加one的值</button>
</template>

<script setup>
import { watch, reactive } from "vue";
const num = reactive({
  value: 1,
});
// newVal: 新值 | oldVal: 旧值
watch(
  () => num.value,
  (newVal, oldVal) => {
    console.log(`新值:${newVal} --- 旧值:${oldVal}`);
  }
);
</script>
<style lang="scss" scoped>
.style {
  margin: 10px 20px;
}
</style>

<template>
  <h1 class="style">{{ num.number }}|{{ num.key.age }}</h1>
  <button class="style" @click="num.number++">增加number的值</button>
  <button class="style" @click="num.key.age++">增加age的值</button>
</template>

<script setup>
import { watch, reactive } from "vue";
const num = reactive({
  number: 1,
  name: "张三",
  key: {
    age: 18,
  },
});
// newVal: 新值 | oldVal: 旧值
watch(
  [() => num.number, () => num.key.age],
   (newVal, oldVal) => {
  console.log(`新值:${newVal} --- 旧值:${oldVal}`);
});
</script>
<style lang="scss" scoped>
.style {
  margin: 10px 20px;
}
</style>

<template>
  <h1 class="style">{{ address }}|{{ num.number }}</h1>
  <button class="style" @click="address++">增加address的值</button>
  <button class="style" @click="num.number++">增加number的值</button>
</template>

<script setup>
import { watch, reactive, ref } from "vue";
const address = ref("88");
const num = reactive({
  number: 1,
  name: "张三",
  key: {
    age: 18,
  },
});
// newVal: 新值 | oldVal: 旧值
watch([address, () => num.number], (newVal, oldVal) => {
  console.log(`新值:${newVal} --- 新值:${newVal}`);
  console.log(`旧值:${oldVal}--- 旧值:${oldVal}`);
});
</script>
<style lang="scss" scoped>
.style {
  margin: 10px 20px;
}
</style>