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>