前往小程序,Get更优阅读体验!
立即前往
发布
社区首页 >专栏 >Vue:watch监视

Vue:watch监视

作者头像
姓王者
发布2024-10-31 18:48:51
发布2024-10-31 18:48:51
590
举报
文章被收录于专栏:姓王者的博客

#watch监视属性方法

情况一

对ref基础类型的监视

这个很容易理解

代码语言:javascript
复制
<script setup lang="ts">  
import { ref,watch} from 'vue';  
let num2 = ref('0'); // 用于存储二进制字符串  
watch(num2,(newvalue,oldvalue)=>{
    console.log(num2+'和新数据'+newvalue+'和旧数据'+oldvalue);
})
</script>  

多次改变num2,打印的结果是这样的

代码语言:javascript
复制
[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对象的监视是对它的什么进行监视呢?它类里面的数据吗?还是说它本身? 让我们测试一下

代码语言:javascript
复制
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定义的对象数据,实际监视的是它的地址值,但是如果我们想要监视它内部的值呢?这时候就需要深度监视

代码语言:javascript
复制
watch(person,(newvalue,oldvalue)=>{
    console.log(newvalue+'和'+oldvalue);
},{deep:true})

情况三

reactive定义的对象类型数据,默认是深度监视, 这里懒得示例了:)

newvalue和oldvalue打印出来是一样的,这是因为地址没有变

情况四

监视refreactive定义的对象数据类型中的属性: 若属性不是对象类型,需要写成函数形式 若属性是对象类型,可以直接编,或者写函数,但是建议写函数

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-09-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 情况一
  • 情况二
  • 情况三
  • 情况四
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档