美文网首页
微信小程序监听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