美文网首页
微信小程序监听data里面某个值得变化 方式一

微信小程序监听data里面某个值得变化 方式一

作者: hao_developer | 来源:发表于2022-06-29 19:33 被阅读0次

watchDate.js

/**
 * 设置监听器
 */
/**
 * 设置监听器
 */
function setWatcher(data, watch) {
  Object.keys(watch).forEach(v => {
    let key = v.split('.'); // 将watch中的属性以'.'切分成数组
    let nowData = data; // 将data赋值给nowData
    for (let i = 0; i < key.length - 1; i++) { // 遍历key数组的元素,除了最后一个!
      nowData = nowData[key[i]]; // 将nowData指向它的key属性对象
    }
    let lastKey = key[key.length - 1];
    // 假设key==='my.name',此时nowData===data['my']===data.my,lastKey==='name'
    observe(nowData, lastKey, watch[v]); // 监听nowData对象的lastKey
  })
}

/**
 * 监听属性 并执行监听函数
 */
function observe(obj, key, watchFun) {
  var val = obj[key]; // 给该属性设默认值
  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    set: function (value) {
      val = value;
      watchFun(value, val); // 赋值(set)时,调用对应函数
    },
    get: function () {
      return val;
    }
  })
}

module.exports = {
  setWatcher: setWatcher
}

test.js页面引用watchDate.js

const watch = require('../../utils/watchDate.js')
Pager({
/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    watch.setWatcher(app.globalData.userInfo, this.watch);
  },
  watch: {
    name:function(newValue) {
      console.log(`新的结果值:${newValue}`);
    },
   'my.age':function(newValue){
      console.log(newValue);
    }
  },
  testClick() {//点击进行修改app.js里面globalData里面的userInfo.name的值
    app.globalData.userInfo.name = '李四123456';
  }
})
image.png

相关文章

网友评论

      本文标题:微信小程序监听data里面某个值得变化 方式一

      本文链接:https://www.haomeiwen.com/subject/bbkovrtx.html