微信小程序使用watch监听数据变化

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

监听器的原理，是将data中需监听的数据写在watch对象中，并给其提供一个方法，当被监听的数据的值改变时，调用该方法。

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

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

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

onLaunch: function () {},
// 设置监听器
watch: function (ctx, obj) {Object.keys(obj).forEach(key => {this.observer(ctx.data, key, ctx.data[key], function (value) {obj[key].call(ctx, value)})})
},
// 监听属性，并执行监听函数
observer: function (data, key, val, fn) {Object.defineProperty(data, key, {configurable: true,enumerable: true,get: function () {return val},set: function (newVal) {if (newVal === val) returnfn && fn(newVal)val = newVal},})
}

然后，在需要监听的页面onLoad中，调用watch方法（其中test是要监听的数据，当test在其他方法中通过this.setData赋值后，watch就能监听到test的变化了）

const app = getApp()
Page({data: {test: 0},onLoad: function () {// 调用监听器，监听数据变化app.watch(this, {test: function (newVal) {console.log(newVal)}})}

微信小程序使用watch监听数据变化相关推荐

微信小程序实现watch监听数据变化
起因:众所周知,微信小程序的数据监听器observers只能在自定义组件中使用,如果想要在页面中实现类似的功能,就只有通过其他的方法.其一就是通过模拟vue的watch来监听数据变化. 实现如下: 1 ...
微信小程序实现watch监听，无需页面引入！！！
目录 1监听函数实现 2.页面Page重写(实现无需引入) 3完整代码实现 4微信小程序代码片段大家都知道小程序其实和Vue的写法以及原理都存在很大的相同,但是里有watch监听可以监听data定义 ...
H5及微信小程序实测可用——监听手机返回键操作
目录 1.自定义导航(只能拦截左上角返回) 2.内嵌H5实现拦截物理键返回(均可监听) 微信小程序开发过程中我们经常遇到需要监听点击左上角返回.手机物理返回键或者左滑返回的需求微信原生是没有API支 ...
微信小程序全局变量改变监听
问题来源最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面.需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层 ...
微信小程序，实现 watch 属性，监听数据变化
转自微信小程序,实现 watch 属性,监听数据变化目标在微信小程序实现 watch 属性,监听 data 中的属性,当被监听属性的值改变时,执行我们指定的方法. 思路 Vue 的 compu ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
微信小游戏的电量监听
在说小游戏的电量监听事件之前,我想先提一下小程序的电量监听事件. 在微信小程序中,是没有电量监听事件的,因为小程序没有全屏,手机端的电量和wifi等信息一直可以看得到,所以小程序里就没有这样的api了 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...

微信小程序使用watch监听数据变化

微信小程序使用watch监听数据变化相关推荐

最新文章

热门文章