微信小程序 - 最新详细实现 watch 监听复杂对象数据方法，支持监听对象Object、数组Array，无论多么复杂的二维数组对象还是数据结构层，让小程序拥有像 vue watch 一样的监听功能！

已于 2024-07-29 17:11:20 修改
阅读量3.9k 收藏 3
点赞数 6
分类专栏： + 微信小程序 文章标签： 微信小程序 watch监听器 实时监听对象数据变化 实时监听数组array数据变化 小程序如何像vue watch 怎么监听复杂对象数组数据改变 最好用的watch插件教程示例
于 2024-07-26 10:34:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/140708463
版权
+ 微信小程序 专栏收录该内容
51 篇文章 22 订阅 ¥9.90 ¥99.00
订阅专栏

前言

网上的教程全都是一摸一样的 setWatcher 方案，这种方案很烂，本文提供高效好用的解决方案。

在微信小程序开发中，详解实现监听 watch 对象object、数组array、二维复杂对象数据等各种数据，让小程序拥有 watch 监听对象、数组等复杂数据变化的能力，仿造 vue watch 监听功能，小程序中实现 watch 监听器监听复杂的对象数组功能，实时监听可配置深度、是否首次监听等。

小程序 vue2 | vue3 版本语法都能使用，跟着教程复制代码运行稍加改造即可。

如下图所示，可监听任意复杂对象类型的数据，并且在页面或组件中都可以使用！

详细示例代码及注释，保证新手小白100%搞定。

在这里插入图片描述

第一步

开始之前，

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
微信小程序页面间传递数组对象方法解析
01-03
这篇文章主要介绍了微信小程序页面间传递数组对象方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 方法1：A页面跳转链接添加参数，B页面onLoad 接收 方法2：设置全局变量 globalData，用的少，一般适用于全局共享的一份信息，如用户open_id等 // A页面 // 数组、对象都需要stringify var listData = JSON.stringify(that.data.listData) var taskArray = JSON.stringify(that.data.taskArray) wx.naviga
微信小程序中实现watch监听机制
m0_53358243的博客
03-28 1118
自用。 使用Object.defineProperty()劫持数据的set操作，在监听对象改变后执行传入的Fn。 1. 定义watch.js 在根目录（miniprogram）下创建watch.js。 // watch.js const observe = (obj, key, watchFn, deep, page) => { let oldVal = obj[key] // 如果监听对象是 object 类型并且指定deep => (深度监听) if (oldVal
微信小程序，实现 watch 属性，监听数据变化
03-29
在微信小程序实现 watch 属性，监听 data 中的属性，当被监听属性的值改变时，执行我们指定的方法。​​   思路 Vue 的 computed 和 watch 可以很方便的检测数据的变化，从而做出相应的改变，所以，模仿 vue 肯定是一个不错的选择。   与 Vue 一样，我们使用 ES5 的 Object.defineProperty() 方法，劫持对象的 getter/setter ，从而实现给对象赋值时(调用 setter)，执行 watch 对象中相对应的函数，达到监听效果。   代码 不啰嗦，上代码，真实可用。   function observe(obj, key, wat
微信小程序实现watch监听
11-20
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：监听属性 watch。 虽然watch的滥用会导致性能不佳，但在一些情况下我们还是需要watch，使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦…)。 小程序实现 类似vue 一样的watch 监听数据 将方法注册到app.js 中也可以使用高级一点的写法 使用装饰器模式将小程序page 重写挂在到生命周期函数上或者挂在页面this 上每次就不需要重新在调用初始化一次。本文对装饰器模式不做介绍这是个思路。等待下次实现 setWatcher(page) { let data = page.data; // 获取pa
原生微信小程序使用watch监听
FormAda的博客
07-28 1403
1.封装watch 创建watch.js： /** * 设置监听器 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; // 将da
微信小程序 watch监听器
weixin_39975379的博客
05-13 425
场景：需要监听page中某个值的变化做出相应的处理，微信小程序官方文档中有写组件中可以使用observers来监听，但是页面上如何监听值变化却没有方法，所以我们要自己写一个watch的方法 思路： 模仿vue2双向绑定原理 上代码： // app.ts watch(methods:any,prop:any){ let obj = <any>this.globalData let events = obj.eventsqueue events.push(
微信小程序知识点（上）
qq_20411471的博客
03-17 3584
1.流式布局中flex-direction:属性要和display:flex搭配使用。 2内容居中的方法：.xxx{ height: 80rpx; line-height: 80rpx; }
微信小程序增强补丁，提供 watch 和 computed 特性miniprogrampatch-master.zip
09-25
微信小程序增强补丁，提供 watch 和 computed 特性miniprogrampatch-master.zip
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
qq_61686552的博客
06-16 781
前端 重点，重点，重点
2021年最新Web前端面试题精选大全及答案
m0_54861649的博客
03-07 1855
目录 HTML、CSS相关 Javascript相关 三者的异同 Vue相关 55.Vue路由懒加载（按需加载路由） React相关 react 生命周期函数 ******为什么虚拟 dom 会提高性能?(必考) (组件的)状态(state)和属性(props)之间有何不同 shouldComponentUpdate 是做什么的 react diff 原理 何为受控组件 调用 super(props) 的目的是什么 React 中构建组件的方式 小程序相关的 其他 企业中的项目流程 奇葩问题 HTML、C
微信小程序 - 最新超详细 watch 侦听器功能，支持监听对象、数组及各种复杂对象数据，可在任意页面或组件中使用（绝非网上千篇一律的 “setWatcher“ 不能监听对象的垃圾方法，方案开箱即用）
王佳斌
06-20 3864
微信小程序watch computed，微信小程序watch侦听器，微信小程序watch监听复杂对象的数据变化，微信小程序怎么实现watch数据监听，微信小程序如何实现像vue那样监听对象数组变化后触发，微信小程序setWatcher怎么监听复杂对象数组对象类型的数据，微信小程序除了setWatcher还有什么方法能实现watch监听，小程序setWatcher无法监听侦听对象和数组变化，小程序使用watch监听数据变化，小程序实现watch属性监听数据变化，微信小程序watch监听,类似vue的watch
微信小程序实现类Vue-watch数据监听
Komorebi_00的博客
06-29 1273
监听页面数据变化 initWatch(_page) {if(!_page) {console . error('未检测到Page对象,请将当前page传入该函数');} if(!//判断是否有需要监听的字段 console . error('未检测到Page.watch字段(如果不需要监听，请移除initWatch的调用片段)');//遍历需要监听的字段 _page . data [ '__' + _key ] = _page . data [ _key ];
微信小程序中使用watch监听属性
吴冬雪的博客
04-25 471
app.js 设置监听器setWatcher。
微信小程序中使用 watch
qq_36081714的博客
04-11 866
为了能够全局使用监听器，我们需要在 app.js 中添加该方法（或者外部引入）
微信小程序实现类似Vue中的computed、watch功能
最新发布
weixin_42979149的博客
11-23 1610
进入小程序后，打开终端，点击顶部“视图” - “终端”点击开发者工具中的菜单栏：工具 --> 构建 npm。在自定义组件中,以require的方式引入。初始化包管理器，生成一个。
微信小程序：数据传递详解与对象数组转换策略
在微信小程序的前后端通信中，虽然所有数据本质上都会被转化为字符串形式，但处理对象和数组等复杂数据结构时，需要特殊对待。 1. 基本数据类型传递： 在`index.js`的发送页中，如所示： ```javascript Page({ ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值