1. 监听 reactive 对象的某个属性 如果你只想监听 reactive 对象的某个特定属性,可以直接在 watch 中传入该属性。 import { reactive, watch } from 'vue'; const state = reactive({ name: 'John', age: 30, location: 'New York', }); // 监听 name 属性的变化 watch(() => state.name, (newV...
watch([()=>person.name,()=>person.age],(newv,oldv)=>{ console.log('name或age变化了',neldv) },{immediate:true;deep:true}) 情况六:特殊情况 reactive监视对象的某个属性,该属性多层嵌套,必须开启深度监视 watch(()=>person.job,(newv,oldv)=>{ console.log('job发生改变',newv,oldv) },...
🍋情况三：监视【reactive】定义的对象类型数据 ● 🍋情况四：监视【ref或reactive】定义的对象类型数据中的某个属性 ● 🍋情况五：监视上述的多个数据 ● 🍋总结 🍋情况三：监视【reactive】定义的对象类型数据 准备代码如下 Vue 复制代码 99 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17...
},{immediate:true,deep:false})//此处的deep配置不再奏效//情况四:监视reactive定义的响应式数据中的某个属性watch(()=>person.job,(newValue,oldValue)=>{console.log('person的job变化了',newValue,oldValue) },{immediate:true,deep:true})//情况五:监视reactive定义的响应式数据中的某些属性watch([()=...
在vue3里面,reactive、watch等都属于基础用法,官网也给出实例,比如这样: 如果想监听 reactive 任意一个属性的变化,按照官网要这么写: 既然 ref...
reactive定义的数据。 函数返回一个值(getter函数)。 一个包含上述内容的数组。 我们在Vue3中使用watch的时候,通常会遇到以下几种情况: * 情况一 监视ref定义的【基本类型】数据:直接写数据名即可,监视的是其value值的改变。 <template>情况一:监视【ref】定义的【基本类型】数据当前求和为:{{sum}}点我sum+1<...
vue3 官网没有明说的隐藏技能(一)watch与reactive 简介:在 vue3里面,reactive、watch等都属于基础用法。 在vue3里面,reactive、watch等都属于基础用法,官网也给出实例,比如这样: // 侦听一个 getterconst state = reactive({ count: 0 })watch(() => state.count,(count, prevCount) => {/* ... */...
watch(()=>rea.obj,(newValue,oldValue) => {console.log('rea的薪资变化了',newValue,oldValue)},{deep:true}) watch的小缺陷 1.监听reactive定义的响应式数据,会强制开启深度监听(deep:true),无法获取正确的oldvalue(变化前的值)。 2. 监听reactive定义的响应式数据中的某个属性(对象形式)时,不会强制...
{letdata=reactive({counter:1,a:{b:{c:{d:{counter1:100}}});// 对于reactive监视的属性来说,默认就是开启深度监视的// 如果需要针对对象的某属性,那就只指定这个属性即可watch(data,(newValue,oldValue)=>{// 对于reactive来说,新的可以获取,老的获取不了console.log("我是新的"+newValue+"我是旧...
watch(()=>rea.obj,(newValue,oldValue)=>{console.log('rea的薪资变化了',newValue,oldValue)},{deep:true}) watch的小缺陷 1.监听reactive定义的响应式数据,会强制开启深度监听(deep:true),无法获取正确的oldvalue(变化前的值)。 2. 监听reactive定义的响应式数据中的某个属性(对象形式)时,不会强制开启...