vue监听多级属性,watch?

本文记录了'窝草行天下'的旅程,实时更新,捕捉文字变化的每一刻。

来来来,走过路过,不要错过!!!

data{
    	obj:{
    		text:'窝草行天下';
    	}
    }
watch:{
   		'obj.text':{
   			deep:true, //是否开启深度监听
   			immediate: true, // 监听到路由的变化立即执行
   			handler(){
   				console.log('text改变了')
   			}
   		}
   	}
### Vue3 中 `watch` 监听方法详解 #### 单个基本数据类型的监听 当需要监听由 `ref` 创建的基本数据类型时,可以采用如下形式: ```javascript import { ref, watch } from 'vue'; const sum = ref(122); watch(sum, (newValue, oldValue) => { console.log(`sum changed from ${oldValue} to ${newValue}`); }); ``` 这种方式适用于简单的数值、字符串或其他基础类型的变量监控[^1]。 #### 多个基本数据类型的监听 对于多个基于 `ref` 的简单数据类型的同时监听,则可以通过数组的形式传递给 `watch` 函数: ```javascript import { ref, watch } from 'vue'; let sum = ref(122); let tipsmessage = ref("hello"); watch([sum, tipsmessage], ([newSum, newMessage], [oldSum, oldMessage]) => { console.log(`sum changed from ${oldSum} to ${newSum}, message changed from "${oldMessage}" to "${newMessage}"`); }); ``` 此模式允许同时观察多个独立的基础型态的变化情况。 #### 对象整体的监听 如果目标是一个通过 `reactive` 定义的对象,那么可以直接将其作为参数传入 `watch` 来跟踪整个对象的状态变更: ```javascript import { reactive, watch } from 'vue'; const obj = reactive({ name: "老王", age: "50" }); watch(obj, (newValue, oldValue) => { console.log('object has been updated'); }, { deep: true }); ``` 注意这里加入了 `{deep:true}` 配置项来确保能够捕捉到深层次嵌套属性的变化。 #### 特定属性监听 针对特定字段而非整个对象的情况,可利用箭头函数返回所需关注的具体路径表达式来进行精准定位: ```javascript import { reactive, watch } from 'vue'; const obj = reactive({ test: { salary: 3000, year: 1, } }); // 只监听test.salary这一条目下的变动 watch(() => obj.test.salary, (newValue, oldValue) => { console.log(`salary changed from ${oldValue} to ${newValue}`); }); ``` 这种方法提供了更细粒度控制的能力,只对感兴趣的那部分状态作出反应。 #### 组合监听多级嵌套结构内的若干属性 最后一种情形涉及到了复杂的数据模型中挑选出几个关键点进行联合监测: ```javascript import { reactive, watch } from 'vue'; const obj = reactive({ test: { salary: 3000, year: 1, }, otherProp: {} }); watch( () => ({ salary: obj.test.salary, year: obj.test.year }), ({ salary, year }, { prevSalary, prevYear }) => { console.log(`salary or year changed. New values are: salary=${salary}, year=${year}. Previous were: salary=${prevSalary}, year=${prevYear}`); } ); ``` 上述代码展示了如何有效地处理深层嵌套对象内选定成员变量之间的相互依赖关系并及时响应其改变事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值