👁️👁️watching you!👁️👁️
#watch监视属性方法
情况一
对ref基础类型的监视
这个很容易理解
1 2 3 4 5 6 7
| <script setup lang="ts"> import { ref,watch} from 'vue'; let num2 = ref('0'); watch(num2,(newvalue,oldvalue)=>{ console.log(num2+'和新数据'+newvalue+'和旧数据'+oldvalue); }) </script>
|
多次改变num2
,打印的结果是这样的
1 2 3 4
| [object Object]和新数据和旧数据0 Change.vue:19 [object Object]和新数据1111011和旧数据 Change.vue:19 [object Object]和新数据11110000101101001和旧数据1111011 Change.vue:19 [object Object]和新数据1和旧数据11110000101101001
|
这确实不难理解
情况二
对ref对象数据的监视
这不禁让我们思考,对ref对象的监视是对它的什么进行监视呢?它类里面的数据吗?还是说它本身?
让我们测试一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| let person=ref({ name:'李四', age:30 }) watch(num2,(newvalue,oldvalue)=>{ console.log(num2+'和新数据'+newvalue+'和旧数据'+oldvalue); }) function changeAge(){ person.value.age++; } function changeName(){ person.value.name+='~'; } function changePerson(){ person.value={ name:'王二', age:90 } } watch(person,(newvalue,oldvalue)=>{ console.log(newvalue+'和'+oldvalue); })
|
实际上,只有第三个方法触发了监视,这意味着
监视ref定义的对象数据,实际监视的是它的地址值,但是如果我们想要监视它内部的值呢?这时候就需要深度监视
1 2 3 4
| watch(person,(newvalue,oldvalue)=>{ console.log(newvalue+'和'+oldvalue); },{deep:true})
|
情况三
reactive
定义的对象类型数据,默认是深度监视,
这里懒得示例了:)
newvalue和oldvalue打印出来是一样的,这是因为地址没有变
情况四
监视ref
和reactive
定义的对象数据类型中的属性:
若属性不是对象类型,需要写成函数形式
若属性是对象类型,可以直接编,或者写函数,但是建议写函数
p u b l i c
2024/09/30 21:19:04
L I C E N S E