小程序使用看监听数据变化的方法详解

　　

众所周知,Vue中,可以使用监听属性观察来观察和响应Vue实例上的数据变化,那么小程序能不能实现这一点呢?

　　

监听器的原理,是将数据中需监听的数据写在看对象中,并给其提供一个方法,当被监听的数据的值改变时,调用该方法强生的# 8203;& # 8203;

　　

我们需要用到Javascript中的Object.defineProperty()方法,来手动劫持对象的getter/setter,从而实现给对象赋值时(调用setter),执行看对象中相对应的函数,达到监听效果。

　　

Object.defineProperty()方法,会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。

　　

这里假定有多个页面需要监听需求,把监听方法写在app.js中,以便全局调用

　　 　　 　　onLaunch:函数(){},//设置监听器 　　看:函数(ctx obj) { 　　种(obj)。forEach(关键=比;{ 　　this.observer (ctx)。数据、关键ctx。数据(关键)、功能(价值){ 　　obj(关键)。调用(ctx、价值) 　　}) 　　}) 　　},//监听属性,并执行监听函数 　　观察者:功能(数据、关键val, fn) { 　　Object.defineProperty(数据、关键{ 　　可配置:没错, 　　可列举的:真的, 　　得到:函数(){ 　　返回瓦尔 　　}, 　　设置:函数(newVal) { 　　如果(newVal===val)返回 　　fn,,fn (newVal) 　　val=newVal 　　}, 　　}) 　　} 　　 　　

然后,在需要监听的页面onLoad中,调用看方法(其中测试是要监听的数据,当测试在其他方法中通过this.setData赋值后,观察就能监听到测试的变化了)

　　 　　 　　const应用=getApp () 　　页面({ 　　数据:{ 　　测试:0 　　}, 　　onLoad:函数(){//调用监听器,监听数据变化 　　app.watch(这个,{ 　　测试:功能(newVal) { 　　console.log (newVal) 　　｝ 　　}) 　　} 　　 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

小程序使用看监听数据变化的方法详解