会员
众包
新闻
博问
闪存
赞助商
HarmonyOS
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
Handsome boy
博客园
首页
新随笔
联系
订阅
管理
关于在Vue3中如何使用watch监听器
`
<template> watch {{ num }} {{ height }} <button @click="add()">+++</button> </template> <script setup> import { ref, watch, watchEffect } from "vue"; let num = ref(0); let height = ref(0); // 侦听器 // watch(要监听的属性名,方法) 手动监听 // watchEffect:不需要明确要监听的数据,页面初始化就去执行 let stopwatch = watch(num, (newval, oldval) => { console.log(newval, oldval); if (newval == 5) { stopwatch(); //停止侦听 } }); let obj = ref({ name: "张三", age: 15, }); // 监控对象中某一项的变化,需要开启深度监听 deep watch( obj, (newval, oldval) => { console.log(newval, oldval); }, { deep: true } ); // 非对象格式监听 let obj2 = ref({ name: "ccc", order: { a: 5, b: 2, }, }); // 参数使用函数的形式写 watch( () => obj2.value.order, (nnn, ooo) => { console.log(nnn, ooo); }, { deep: true } ); let add = () => { num.value++; obj.value.age++; obj2.value.order.a++; height.value++; // obj.value = { // name:'li', // age:66 // } }; // 多个参数监听 watch( [num, () => obj.value], (nnnv, ooov) => { console.log(nnnv, ooov); }, { deep: true } ); watchEffect(() => { console.log(height.value, "watchEffect"); }); </script> <textarea>`
posted @
2025-02-18 16:38
李秋风
阅读(
11
) 评论(
0
)
收藏
举报
刷新页面
返回顶部
公告