小程序使用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)
}
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS小技巧之通过字符串追加元素方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
JavaScript 是属于网络的脚本语言。本文是小编日常收集整理些javascript入门基础知识，对js新手朋友非常有帮助，对js入门知识点感兴趣的朋友一起学习吧2016-03-03
基于Bootstrap下拉框插件bootstrap-select使用方法详解
这篇文章主要为大家详细介绍了基于Bootstrap下拉框插件bootstrap-select的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
JS实现浏览器菜单命令...2006-09-09
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
今天小编就为大家分享一篇浅谈layer的Icon样式以及一些常用的layer窗口使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
js是弱类型语言，或者说是动态语言，在定义变量时我们可以不提前声明变量的类型，也可以在变量声明后赋予不同类型的值。所以本文为大家详解一下JavaScript如何准确获取任意变量的数据类型，需要的可以参考一下2022-06-06
JavaScript错误处理之分析 Uncaught(in promise) error的
在开发过程中,JavaScript的错误处理是一个老生常谈的话题,当应用程序发生未捕获的异常时,Uncaught(in promise) error是其中最常见的错误类型,这篇文章将从多个方面详细阐述这种错误类型的原因与解决方案,感兴趣的朋友一起看看吧2023-12-12
数组，即Array类型，是开发中最常用的类型之一。这篇文章主要介绍了浅谈Javascript数组的相关资料,需要的朋友可以参考下2016-05-05
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证长度，需要的朋友参考下吧2016-03-03
这篇文章主要为大家详细介绍了js实现页面导航层级指示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论