微信小程序实现页面数据侦听器,类似vue的watch

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

既然小程序的组件已经有Observer功能,那为什么还要手写watch功能呢?

  1. Observer只能在Component中使用,没法在Page中使用。若是想在Page中监控某一数据的变化,Observer做不到。
  2. Observer属于小程序的新功能,只能在高版本微信使用,低版本微信无法使用。公司的小程序就因为使用了Observer功能,导致很多低版本微信用户无法使用这个小程序。

 HTML代码

<view>{{n1}}+{{n2}}={{sum}}</view>
<button bindtap="addn1">页面中监听n1+1</button>
<button bindtap="addn2">页面中监听n2+1</button>

新建一个watch.js文件存放监听器的逻辑函数,代码如下:

/**
 * 设置监听器
 */
export function setWatcher(page) {
  let data = page.data;
  let watch = page.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];
      let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法
      let deep = watch[v].deep; // 若未设置deep,则为undefine
      observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey
  })
}
/**
* 监听属性 并执行监听函数
*/
function observe(obj, key, watchFun, deep, page) {
  var val = obj[key];
  // 判断deep是true 且 val不能为空 且 typeof val==='object'(数组内数值变化也需要深度监听)
  if (deep && val != null && typeof val === 'object') {
      Object.keys(val).forEach(childKey => { // 遍历val对象下的每一个key
          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
}

 在该文件中引入watch.js,

   tips:如果有多个页面都需要使用watch监听,可以直接在app.js中引入该文件,注册成全局函数,这样就不用每个文件都去引入watch.js了,只需要在使用的页面onLoad的时候调用一次该函数,就能愉快的使用watch了。

import { setWatcher } from '../../utils/watch';

 js代码文章来源地址https://www.toymoban.com/news/detail-771768.html

 data: {
    n1:1,
    n2:0,
    sum:0,
    obj: {},
  },
  addn1(){
    this.setData({
          n1:this.data.n1+1,
    })
  },
  addn2(){
    this.setData({
          n2:this.data.n2+1,
    })
  },
  onLoad(options) {
  // 在onload的时候调用一次监听函数,然后就可以像vue一样愉快的使用watch了
    setWatcher(this);
  },
  // 用法完全和vue一样,也能实现对象的深度监听
  watch: {
    n1(n1) {
        console.log(n1)
        this.setData({
          sum:n1+this.data.n2
        })
    },
    n2(n2) {
      console.log(n2)
      this.setData({
        sum:n2+this.data.n1
      })
    },
    obj: {
      handler(v) {
       console.log(v)
      },
      deep: true
    }

  
},

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中watch侦听器用法

    watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用 watch第一个参数监听源 watch第二个参数回调函数cb(newVal,oldVal) watch第三个参数一个options配置项是一个对象{ immediate :true //是否立即调用一次 deep :true //是否开启深度监听 flush :“pre” // 更新时机 } flush配置项 p

    2024年02月06日
    浏览(55)
  • Vue学习-计算属性和侦听器

    1、计算属性的定义和原理 1、定义:要用的属性不存在,要通过已有属性计算得来。 2、原理:底层借助了Objcet.defineproperty方法提供的getter和setter。 3、get函数什么时候执行?   (1) 初次读取时会执行一次。   (2)当依赖的数据发生改变时会被再次调用。 4、优势:与

    2023年04月18日
    浏览(49)
  • VUE教程-基础-计算属性和侦听器

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量  message  的翻转字符串。当你想要在模板中的多

    2024年02月17日
    浏览(59)
  • 二、基础篇 vue计算属性和侦听器

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量  message  的翻转字符串。当你想要在模板中的多

    2024年01月18日
    浏览(59)
  • 【源码系列#04】Vue3侦听器原理(Watch)

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数 第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性

    2024年02月04日
    浏览(65)
  • 【Spring Boot系列】- Spring Boot侦听器Listener

    什么事Web监听器?web监听器就是 Servlet中特殊的类 ,他们能帮助开发者监听web中的特定事件,比如ServletContext、HttpSession、ServletRequest的创建和销毁;变量的创建、销毁和修改等。可以在某些动作前后增加处理,实现监控等等。web监听器的使用场景有很多;Spring的监听器是一种

    2024年02月07日
    浏览(49)
  • Vue Composition API之侦听器watch/watchEffect

    在日常的开发中,很多时候我们需要去对一些状态进行监听,比如当显示学生的成绩列表时,我们使用一个学生的学号student_num作为请求成绩的参数,如果没有监听机制,当学号student_num改变时,我们需要依赖用户的操作去刷新成绩。但是有了侦听器,我们可以通过侦听器去监

    2024年02月08日
    浏览(47)
  • 【vue2】计算属性(computed)与侦听器(watch)详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘本文核心: 计算属性与侦听属性的用法 目录( 文末有给大家准备好的Xmind思维导图 ) 一、计算属性computed ①默认get()方法,仅是获取值 ②不仅仅是获取值,还具有修改属性功能

    2024年01月16日
    浏览(52)
  • 使用事件侦听器和 MATLAB GUI 查看 Simulink 信号研究

     💥💥💞💞 欢迎来到本博客 ❤️❤️💥💥 🏆博主优势: 🌞🌞🌞 博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️ 座右铭: 行百里者,半于九十。 📋📋📋 本文目录如下: 🎁🎁🎁 目录 💥1 概述 📚2 运行结果 🎉3 参考文献 🌈4 Matlab代码、Simulink 该

    2024年02月13日
    浏览(43)
  • Vue3前端开发,watch侦听器的深度监听和精确监听

    Vue3前端开发,watch侦听器的深度监听和精确监听!今天和大家分享的内容是,关于watch的深度侦听和精确监听。 首先看一下,第一个案例,练习的是,深度监听的效果。默认是浅的侦听,是不会触发回调函数的。 如图,当我们点击按钮,修改num值的时候,触发了回调函数,在

    2024年01月23日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包