setup中使用watch
watch属性监听器的作用在vue3.0中没有改变,还是监听值得变化。
在vue3.0中,仍然支持watch配置项。但是我们要在setup中使用watch得话,我们要导入watch的API,然后往watch函数中传参。
注意我们在setup中监视的数据要是响应式的,即数据要经过ref或者reactive处理。
当监视的基本类型的数据时,用法:watch("数据名",处理函数,配置对象(可省))
写一个例子:监视变量a的改变
<script setup>import { ref,watch } from "vue";let a=ref(20)//监听基本数据类型watch(a,(newvalue,oldvalue)=>{console.log("a原本为"+oldvalue+",被修改为"+newvalue);},{immediate:true})//初始加载页面就运行一次let changerandom=()=>{let sam=parseInt(Math.random()*100)-50console.log(sam);a.value+=sam}</script><template><div><p>{{a}}</p><button @click="changerandom">随机修改a的值</button></div>
</template>
当我们第三个参数对象配置上immediate:true时,页面初始加载时就会调用一次监听打印,这时没有旧值就为undefined.
浏览器打印情况:
当点击按钮,a的value值-37,被监听到。
当监视的是引用数据类型时,用法也是:watch("数据名",处理函数,配置对象(可省))
不过当监听的是引用数据时,有几点需要注意:1、处理函数获取不了旧值,我们打印出来的跟新值一样,这是vue3.0的一个bug;2、引用数据内部默认开启深度监听,而且手动deep:false关闭不了。
写一个例子:
<script setup>import { reactive, ref,watch } from "vue";let obj=reactive({name:"张三",age:"40",school:"cqdx",degree:"professor",other:{hobby:"sing"}})//监听引用数据类型 默认开启了深度监听,而且无法关闭。同时获取不了旧值watch(obj,(newvalue,oldvalue)=>{console.log(newvalue,oldvalue);},{deep:false})//这里{deep:false}无效//改变引用对象的age属性let changeage=()=>{obj.age++}
</script><template><div><p>{{obj.age}}</p><button @click="changeage">age加一</button></div>
</template>
当点击按钮以后,检测到引用数据内部属性值的改变,浏览器控制台打印情况:
有关引用数据还有一个问题,当监听reactive处理过的引用数据内的一个引用数据时,这时它不具备默认深度监听,需要手动开启。并且如果要监听某个引用数据的属性,watch的第一个参数不再是写对象的引用,而是要写为函数的返回值的形式。
如监听上述例子的other属性,
<script setup>import { reactive,watch } from "vue";let obj=reactive({name:"张三",age:"40",school:"cqdx",degree:"professor",other:{hobby:"sing"}})watch(()=>obj.other,(newvalue,oldvalue)=>{console.log(newvalue,oldvalue);},{deep:true}) //如果不配置deep,则检测不到hobby的改变let changehobby=()=>{obj.other.hobby="dance"}
</script><template><div><p>{{{obj.other.hobby}}</p><button @click="changehobby">改变兴趣</button></div>
</template>
setup中使用watch相关推荐
- 在 Inno Setup 中实现倒数N秒后激活按钮
在 Inno Setup 中实现倒数N秒后激活按钮 原文 http://restools.hanzify.org/article.asp?id=67 timectrl.dll 为一个 6.5 KB 的 ...
- Vue3里的setup中使用vuex
useStore 这里我们可以直接从vuex 4.X中解构出useStore方法,就可以在setup中使用vuex的相关函数 template 使用$store <template>< ...
- Vue3 Composition API(二)——computed、watchEffect、setup中使用ref
一.computed 在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理 在前面的Options API中,我们是使用computed选项来完成的: ...
- 使用customRef自定义ref,解决setup中处理异步问题。
setup中不允许使用async.await使用customRef可以让请求到的数据自动获取响应式状态 详见下方demo <template><div>{{ num }}< ...
- vue3 setup中父组件通过Ref调用子组件的方法
在setup()钩子函数中调用 父组件 <template><div>我是父组件<children ref="childrenRef" />&l ...
- compostion-api(setup中) watch使用细节
目录 一.监听某一个对象 二.监听对象的一个属性 三.监听多个对象或对象的属性 四.组合式api 监听的到底是什么? 五.总结 前提(currentOperaMsg是一个响应式对象) 以下所述的wat ...
- setup中使用ref
目录 一.问题 二.解决方法 三.总结 一.问题 1.在选项式API中可以直接用 this.$refs.xxx来引用template中的DOM元素. 但是在组合式API setup中没有this,该如 ...
- Vue3.0如何在setup中获取定义的全局方法
有些情况下我们需要定义全局方法 然而在vue3.0中我们定义全局方法需要在globalProperties上面定义大部分情况下还是可以定义在main.js中的 我们这里就以定义在main.js中为例 ...
- setup中如何使用mapState
着急的同学可以直接查看文末的最终版本以及使用说明 推演过程 优化 vuex的模块化 最终版本 使用说明 小结 推演过程 vuex提供了mapState.mapMutations-辅助函数,让我们能够方 ...
最新文章
- Android Editext监听光标位置
- 监控摄像头卡顿_视频监控系统施工六大注意事项
- TeliaSonera计划2018年推出5G服务
- unity如何让物体与特定物体之间不发生碰撞
- 计算机控制系统笔记,笔记型计算机的电源控制系统
- python多线程实现for循环_Python多线程实现同时执行两个while循环
- mysql-5.7.11-winx64 免安装版(MySQL ZIP Archive版)配置及密码问题处理
- Spring Data Jpa 不打印sql参数
- (libgdx学习)Continuous non continuous rendering
- 蓝桥杯 ALGO-123 算法训练 A+B problem
- es6 模板字变量和字符串占位符
- 破解Prezi桌面版30天限制的方法
- 苹果经典提示音_微信提示音,可以更换成你喜欢的声音了!
- 可调稳压电源lm317实验报告_LM317可调稳压电源实训实验.doc
- 山地车中轴进水表现_山地车中轴异响分析及解决方法
- 映客卖身、花椒获资、抖音崛起——直播和短视频现状分析
- 3、HeidiSQL数据库管理工具下载与安装
- 实现163邮箱发送邮件功能
- JackKnife开发专题-性能强大的ORM框架- JackKnife-ORM
- 通用 OCR API 接口
热门文章
- 游戏行业(北区)客户沙龙丨阿里云用户组北京站
- 3dMax 螺旋线桌子
- 计算机会计课程试题及答案,会计证《初级会计电算化》上机考试试题(含答案)...
- 深度学习框架-Backbone汇总-附参考文献ris格式
- 新催收系统数据库表设计的小结
- 谷歌浏览器跨域怎么设置
- 「软技能|真・复盘」复盘不是总结也不是批斗,当我们聊复盘的时候我们在干什么
- 现在联盟哪个服务器有无限乱斗,2020年lol国服无限乱斗延长_英雄联盟国服无限乱斗延长开放时间详情_3DM网游...
- SEO排名,站内与站外优化的策略!
- Ubuntu 完全卸载 docker