全面总结Vue3.0的多种侦听方式
程序员文章站
2022-03-24 08:13:03
目录一、wactheffect侦听器虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 vue 通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化...
侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 vue 通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
一、wactheffect
立即执行,没有immediate
侦听,watcheffect是立即执行的,没有immediate,不需要传递侦听的内容,自动会感知代码依赖,不需要传参,只需要传一个回调函数不能获取之前的值
如果需要停用侦听器,可以回调这个侦听器函数
const stop = watcheffect(()=>{ // console.log('num:',num.value); // console.log('num:',str.value); })
二、watch
不会立即执行,需要手动开启immediate
// 指定主要侦听的值num watch(num,(val,oval)=>{ // val:新值,oval:之前的值 // console.log(num.value); // console.log(val,oval); },{//第二个参数obj immediate,deep immediate:true//默认就是只有数据改变时才会监听, // 第一次创建的时候不会执行,设置成true,第一次就会执行 })
- 侦听ref的数据源
- 侦听reactive数据源
1.1第一种方式侦听
//侦听state下的id,对象数据的变化 watch(state,(val,oval)=>{ // console.log('id',val.id,oval); },{ immediate:true, deep:true//开启深度监听,能够侦听到对象属性值的变化 })
1.2第二种方式侦听
// 侦听state.uname watch(()=>state.uname,(uname,p)=>{ //uname新值,p旧值 console.log(uname,p); },{ immediate:true })
1.3侦听多个数据源
//侦听多个数据(id,uname) //()=>state.id,相当于//object.values(torefs(state))解构了 const stop = watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{ // id新,oid旧 console.log('id',id,oid); // uname新,oname旧 console.log('uname',uname,oname); })
总结
到此这篇vue3.0多种侦听方式的文章就介绍到这了,更多相关vue3.0侦听方式内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: 简单谈谈Python中的模块导入
推荐阅读
-
JavaScript创建对象的七种方式全面总结
-
JavaScript获取tr td 的三种方式全面总结(推荐)
-
ASP.NET MVC传递Model到视图的多种方式总结
-
mysql 数据库备份的多种实现方式总结
-
全面总结Vue3.0的多种侦听方式
-
ASP.NET MVC传递Model到视图的多种方式总结(二)__关于ViewBag、ViewData和TempData的实现机制与区别
-
JavaScript获取tr td 的三种方式全面总结(推荐)
-
JavaScript创建对象的七种方式全面总结
-
JavaScript中具名函数的多种调用方式总结_javascript技巧
-
Javascript中匿名函数的多种调用方式总结_javascript技巧