微信小程序在page页面中watch监听变量变化

微信小程序在page页面中watch监听变量变化

一、首先在小程序的utils目录下创建一个watch.js文件。

二、watch.js完整代码如下

/** * 监听器模块，用于监听数据对象的属性变化 */functionwatch(context,variableName,callback){letvalue=context.data[variableName];// 获取被监听属性的当前值// 使用 Object.defineProperty 方法在数据对象上定义属性的 getter 和 setterObject.defineProperty(context.data,variableName,{configurable:true,// 可配置enumerable:true,// 可枚举get:function(){returnvalue;// 返回属性的当前值},set:function(newVal){constoldVal=value;// 记录属性的旧值value=newVal;// 更新属性的值callback.call(context,newVal,oldVal);// 调用回调函数，传递新值和旧值}});}module.exports={watch:watch};

三、在page页对应的js文件顶部引入watch

import*aswatchfrom"../../utils/watch";Page({...});

四、在page页面的onLoad函数中启用监听

Page({/** * 页面的初始数据 */data:{currentBeginDate:newDate().getTime(),currentEndDate:newDate().getTime(),},/** * 生命周期函数--监听页面加载 */onLoad(t){getApp().page.onLoad(this,t);varthat=this;watch.watch(that,'currentBeginDate',(newVal,oldVal)=>{console.log('监听的数据从'+oldVal+'变成'+newVal);});watch.watch(that,'currentEndDate',(newVal,oldVal)=>{console.log('监听的数据从'+oldVal+'变成'+newVal);});},});