监听微信小程序页面的数据变化-Toy模板网

这篇具有很好参考价值的文章主要介绍了监听微信小程序页面的数据变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、数据监听是为了当数据发生变化时，做一些操作；

2、它的作用相当于Vue中的watch 侦听器

先看效果：

微信小程序监听数据变化,小程序,微信小程序,小程序

第一、先在页面中使用

①：创建watch文件

export function setWatcher(page) {
  let data = page.data;
  let watch = page.watch;
  Object.keys(watch).forEach(v => {
      let key = v.split('.');
      let nowData = data;
      for (let i = 0; i < key.length - 1; i++) {
          nowData = nowData[key[i]];
      }
      let lastKey = key[key.length - 1];
      let watchFun = watch[v].handler || watch[v];
      let deep = watch[v].deep;
      observe(nowData, lastKey, watchFun, deep, page);
  })
}

function observe(obj, key, watchFun, deep, page) {
  var val = obj[key];
  if (deep && val != null && typeof val === 'object') {
      Object.keys(val).forEach(childKey => {
          observe(val, childKey, watchFun, deep, page);
      })
  }
  Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set: function(newVal) {
          watchFun.call(page, newVal, val); 
          val = newVal;
          if (deep) {
              observe(obj, key, watchFun, deep, page);
          }
      },
      get: function() {
          return val;
      }
  })
}
module.exports = {
  setWatcher: setWatcher
}

②：在页面中引入并使用

wxml：

<input bindinput="inputFrame" model:value="{{count}}" type="text" placeholder="监听数据的变化"/>

js：

import { setWatcher } from '../../utils/watch';
Page({
  data: {
    count:''
  },
  inputFrame(){
    setWatcher(this);
    // console.log('正在输入',this.data.count)
  },
  watch: {
    val(v) {
      console.log(v)
    },
    count: {
      handler(v,o) {
        console.log('新值：'+v,'旧值：'+o)
        if(v!==o){
          console.log('被改了')
        }else{
          console.log('没改')
        }
      },
      deep: true
    }
  },
  
})

第二：在组件中使用数据监听

①：wxml：

<view>{{n1}} + {{n2}} = {{sum}}</view>

<button bindtap="addN1">n1+1</button>

<button bindtap="addN2">n2+1</button>

②：JS：

Component({

  /**

   * 组件的初始数据

   */

  data: {

    n1: 0,

    n2: 0,

    sum: 0

  },

  /**

   * 组件的方法列表

   */

  methods: {

    addN1() {

      this.setData({

        n1: this.data.n1 + 1

      })

    },

    addN2() {

      this.setData({

        n2: this.data.n2 + 1

      })

    }

  },

  observers: { // 数据监听数据

    'n1, n2': function (newN1, newN2) { // 监听 n1 和 n2 的数据变化

      this.setData({

        sum: newN1 + newN2 // 通过监听器，自动计算 sum 的值

      })

    }

  }

})

文章来源地址https://www.toymoban.com/news/detail-594386.html

到了这里，关于监听微信小程序页面的数据变化的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！