首页 > 其他分享 >ue3中的watch的用法

ue3中的watch的用法

时间:2022-11-21 15:25:50浏览次数:63  
标签:触发 对象 demo watch 用法 监听 ue3 属性

watch函数收三个参数:

  1. 需要进行监听的数据的数组,

  2. 监听的数据发生改变时的回调

  3. 配置项

一、监听基础类型

二、监听复杂类型

复杂类型的监听有很多种情况,具体的内容如下

  1. 监听整个对象

其第一个参数是直接传入要监听的对象。当监听整个对象时,只要这个对象有任何修改,那么就会触发 watch 方法。无论是其子属性变更(如 demo.name),还是孙属性变更(如 demo.soulmate.name)...,都是会触发 watch 方法的。

2. 监听对象中的某个属性

监听 demo 对象的 name 属性,那么只有当 demo 对象的 name 属性发生变更时,才会触发 watch 方法,其他属性变更不会触发 watch 方法。注意,此时的第一个参数是一个箭头函数。

3. 只监听对象的子属性

watch(() => ({ ...demo }), (newValue, oldValue) => {console.log('watch 已触发', newValue)})

这种情况,只有当 demo 的子属性发生变更时才会触发 watch 方法。孙属性,曾孙属性... 发生变更都不会触发 watch 方法。也就是说,当你修改 demo.soulmate.name 或者 demo.soulmate.nickName 时是不会触发 watch 方法的。

4. 监听对象的所有属性

watch(() => demo, (newValue, oldValue) => {console.log('watch 已触发', newValue)}, { deep: true })

这个相当于监听整个对象(效果与上面的第一种相同)。但是实现方式与上面第一种是不一样的,这里我们可以看到,第一个参数是箭头函数,并且还多了第三个参数 { deep: true }。当加上了第三个参数 { deep: true },那么就不仅仅是监听对象的子属性了,它还会监听 孙属性,曾孙属性 ...

通常要实现监听对象的所有属性,我们都会采用上面第一种方法,原因无他,第一种编码简单,第一个参数直接传入 demo 即可。

三、组合监听

什么是组合监听呢?举个例子,比如我想同时监听 demo 对象的 name 属性,和基础类型 nums,只要他们其中任何一个发生变更,那么就触发 watch 方法。

 

标签:触发,对象,demo,watch,用法,监听,ue3,属性
From: https://www.cnblogs.com/niufang/p/16911461.html

相关文章

  • ToString()的用法
    当前时间staticvoidMain(string[]args)//主程序{//输出2022/11/21Console.WriteLine(DateTime.Now.ToString("d......
  • vue3中的v-model
    V-model具体的变化内容:-组件上单个v-model:属性以及事件的默认名称变了-组件上单个v-model别名:v-bind的.sync修饰符和组件的model......
  • Oracle中ALTER TABLE的五种用法(一)
    首发微信公众号:SQL数据库运维原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1&sn=450e9e94fa709b5eeff0de371c62072b&chksm=ea37536cdd......
  • 使用Stopwatch统计程序执行时间
    编程时,常常需要统计某段程序执行的时长,可以使用以下方法:Stopwatchsw=Stopwatch.StartNew();sw.Start();//需要执行的程序片段sw.Stop();Console.WriteLine("运行时......
  • linux中sed用法读这一篇就够了
    1.概念sed是一种行编辑器,它一次处理一行内容。处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(patternspace),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲......
  • 【Vue3】给整个网页背景document添加单击click事件
    给整个网页背景document添加单击click事件,解决下拉菜单隐藏问题onMounted(()=>{//document.addEventListener('click',function(){alert('body1')})documen......
  • vue3+vant移动端适配 px转换rem
    Vant中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:postcss-pxtorem是一款postcss插件,用于将px单位转化为remlib-flexible用于设置re......
  • shell中的for循环用法详解
    https://www.jb51.net/article/186134.htmfor命令:foriin的各种用法:foriin“file1”“file2”“file3”foriin/boot/*foriin/etc/*.confforiin......
  • 基于python中的静态方法,类方法以及类变量的用法
    基于python中的静态方法,类方法以及类变量的用法最近在做scada系统的自动化部署,采用python语言,在开发过程中用到了,静态方法,类方法,以及类变量,下面就这个特殊的用法做个......
  • Vue笔记 - 计算属性(computed)和监视属性(watch)
    计算属性和监视属性目录计算属性和监视属性1.计算属性2.监视属性2.1深度监视3.computed和watch对比1.计算属性定义:使用的属性起初并不存在,要通过已有属性计算得......