小程序使用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) return fn && 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) } }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
本篇文章主要介绍了微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例,具有一定的参考价值,有兴趣的同学可以了解一下。2016-12-12array.prototype.silce.call 理解分析
在很多框架中与遇到这个方法,但一时没去研究这个方法,只要前段时间被问到,尴尬无奈收场。所以学习就要追根究底的精神,废话少说,说正题。2010-04-04js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
这篇文章主要介绍了js找出5个数中最大的一个数和倒数第二大的数实现方法,结合实例形式总结分析了JavaScript数组遍历、排序、判断、比较等相关操作技巧,需要的朋友可以参考下2020-03-03
最新评论