小程序使用watch监听数据变化的方法详解
更新时间：2019年09月20日 11:04:15 作者：jANE2160
这篇文章主要介绍了小程序使用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)
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文整理了一些常用的web打印及局部打印的方法以备不时之需，感兴趣的朋友可以学习下2013-05-05
下面小编就为大家带来一篇用原生JS对AJAX做简单封装的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要给大家介绍了关于Three.js中矩阵和向量使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
由于业务需要，要求实现树形菜单，且菜单数据由后台返回，下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下2021-05-05
下面这段代码完全实现了判断是否合格.传入号码就行了,包括了算法,下面的是用Ext实现的,但是基于javascript的语法居多,基本都可以用2013-11-11
这篇文章主要介绍了javascript实现的闭包简单实现方法,涉及javascript闭包的原理与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
Angular+Bootstrap+Spring Boot实现分页功能实例代码
这篇文章主要介绍了Angular+Bootstrap+Spring Boot实现分页功能实例代码,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了JavaScript实现单链表过程，链表中的元素在内存中不必是连续的空间。链表的每个元素有一个存储元素本身的节点和指向下一个元素的引用。下面请和小编一起进入文章了解更多的详细内容吧2021-12-12
JavaScript实现AOP详解(面向切面编程,装饰者模式)
下面小编就为大家分享一篇JavaScript实现AOP的方法(面向切面编程,装饰者模式)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
Javascript做面向对象开发的时候，总是会用到很多模拟面向对象特性的方法，这些方法就构成了支撑面向对象Javascript的核心代码2012-05-05
最新评论