vue3-(watch帧听器)

1.watch的基本使用

<template>
  <div>{{ obj.name }}</div>
  <div>{{ obj.age }}</div>
  <button @click="handleClick">修改</button>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
let obj = reactive({
  name: '张三',
  age: 18
});
let msg = ref('基础值');
let age = ref(0);
//帧听一个ref
watch(msg, (newVal, odlVal) => {
  console.log('newVal', newVal);
  console.log('odlVal', odlVal);
});

//帧听对象属性
watch(
  () => obj.age,
  (newVal, odlVal) => {
    console.log('监听对象属性1', newVal);
    console.log('监听对象属性2', odlVal);
  }
);
//侦听多个
watch([age, msg], ([age, msg], [odlage, odlmsg]) => {
  console.log(age, msg, 'age', 'msg');
  console.log(odlage, odlmsg, 'odlage', 'odlmsg');
});

const handleClick = () => {
  msg.value = '修改后的值';
  obj.age++;
  age.value++;
};
obj.age++;
</script>