微享互动主营:媒体广告(腾讯朋友圈 腾讯广点通 腾讯新闻APP 新浪新闻APP 凤凰新闻APP 优酷视频 陌陌到店通)、重庆网站建设、重庆小程序开发、重庆公众号制作

全国服务热线:023-6263 3701 | 15320293856

QQ

咨询

二维码

电话

汪经理:13594363214

文经理:17783139095

罗经理:15320293856

信息搜索
您当前所在的位置 首页>>微享资讯>>小程序

用什么方法可以检测微信小程序数据的变化

来源: 微享互动      时间:2018-07-26  

  在vue中,computed是一个计算属性,类似于过滤器,对绑定到view的数据进行处理,并监听变化。而watch监听复杂数据类型需用深度监听。这两者都可以在vue上实现检测数据的变化。而微信小程序不同于vue可以使用watch和computed做出相应的改变。小程序中只有函数this.setData()可以检测数据,所以小程序每次数据改变需要检测时都必须手动执行函数才可实现。除此之外,小程序还可以附上这两个功能检测数据变化。

用什么方法可以检测微信小程序数据的变化

  vue 里是通过 Object.defineProperty 来实现数据变化检测的,给该变量的 setter 里注入所有的绑定操作,就可以在该变量变化时带动其它数据的变化。实际上,在小程序里实现要比 vue 里简单,应为对于 data 里对象来说,vue 要递归的绑定对象里的每一个变量,使之响应式化。但是在微信小程序里,不管是对于对象还是基本类型,只能通过 this.setData() 来改变,这样我们只需检测 data 里面的 key 值的变化,而不用检测 key 值里面的 key 。

  这里分别调用 test2 和 test3 的值,将返回值与对应的 key 值组合成一个对象,然后再调用 setData() ,这样就会第一次计算这两个值,这里使用了 reduce 方法。test2 和 test3 都是依赖 test 的,这样必须在 test 改变的时候在其的 setter 函数中调用 test2 和 test3 中对应的函数,并通过 setData 来设置这两个变量。

  声明了一个变量来保存所有在变化时需要执行的函数,在 set 时执行每一个函数,因为此时 this.data.test 的值还未改变,使用 setTimeout 在下一轮再执行。现在就有一个问题,怎么将函数添加到 subs 中。不知道各位还是否记得上面我们说到的在 reduce 里的那两行代码。因为在执行计算 test1 和 test2 第一次 computed 值的时候,会调用 test 的 getter 方法,此刻就是一个好机会将函数注入到 subs 中,在 data 上声明一个 $target 变量,并将需要执行的函数赋值给该变量,这样在 getter 中就可以判断 data 上有无 target 值,从而就可以 push 进 subs,要注意的是需要马上将 target 设为 null,

  到此为止已经实现了 watch 和 computed,但是还没完,有个问题。当同时使用这两者的时候,watch 里的对象的键也同时存在于 data 中,这样就会重复在该变量上调用 Object.defineProperty ,后面会覆盖前面。因为这里不像 vue 里可以决定两者的调用顺序,因此我们推荐先写 computed 再写 watch,这样可以 watch computed 里的值。

本文链接:http://www.cqaaa.com/s-app/765.html 欢迎转载!转载注明出处!

上一篇:没有了 下一篇:怎么实现微信小程序接入富文本编辑

预约咨询

马上提交您的需求,我们会在24小时内联系您,提供产品策划服务!

电话:023-62633701

网址:http://www.cqaaa.com

地址:重庆南岸区南坪城市之光30 楼

网站建设咨询:15320293856 罗经理

百度广告咨询:13594363214 汪经理

朋友圈广告咨询:17783139095 文经理

微享官方微信

扫一扫 关注公众号



微享10年

我们共同走过