Vue:watch监视

发表于 分类于 ， 阅读次数： Waline： 本文字数： 1.4k 阅读时长 ≈ 1 分钟
👁️👁️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定义的对象数据类型中的属性:
若属性不是对象类型，需要写成函数形式
若属性是对象类型，可以直接编，或者写函数，但是建议写函数