微信小程序,实现 watch 属性,监听数据变化
转自微信小程序,实现 watch 属性,监听数据变化
目标
在微信小程序实现 watch 属性,监听 data 中的属性,当被监听属性的值改变时,执行我们指定的方法。
思路
Vue 的 computed 和 watch 可以很方便的检测数据的变化,从而做出相应的改变,所以,模仿 vue 肯定是一个不错的选择。
与 Vue 一样,我们使用 ES5 的Object.defineProperty()
方法,劫持对象的 getter/setter,从而实现给对象赋值时(调用 setter),执行 watch 对象中相对应的函数,达到监听效果。
代码
不啰嗦,上代码,真实可用。
function observe(obj, key, watchFun, deep, page) {let val = obj[key];
if (val != null && typeof val === "object" && deep) { Object.keys(val).forEach((item) => { observe(val, item, watchFun, deep, page); }); }
Object.defineProperty(obj, key, { configurable: true, enumerable: true, set: function(value) { watchFun.call(page, value, val); val = value;
<span class="hljs-keyword">if</span> (deep) {observe(obj, key, watchFun, deep, page);}
},
<span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{<span class="hljs-keyword">return</span> val;
}
复制代码
}); }
export function setWatcher(page) { let data = page.data; let watch = page.watch;
Object.keys(watch).forEach((item) => { let targetData = data; let keys = item.split(".");
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < keys.length - <span class="hljs-number">1</span>; i++) {targetData = targetData[keys[i]];
}<span class="hljs-keyword">let</span> targetKey = keys[keys.length - <span class="hljs-number">1</span>];<span class="hljs-keyword">let</span> watchFun = watch[item].handler || watch[item];<span class="hljs-keyword">let</span> deep = watch[item].deep;
observe(targetData, targetKey, watchFun, deep, page);
复制代码
复制代码
}); } 复制代码复制代码
注意事项:
- watch 只能监听已存在的属性,数组的
push()
,pop()
等方法并不会触发监听函数。
使用
import * as watch from "./watch.js";
Page({ data: { name: "二狗子" },
onLoad() { watch.setWatcher(this); },
复制代码
watch: { name: function(newVal, oldVal) { console.log(newVal, oldVal); } } }); 复制代码复制代码
首先在需要的页面引入 在 Page 的onLoad
钩子设置监听器
然后就可以愉快的使用了。
总结
watch 会使代码更简洁,逻辑更清晰,在响应式数据处理上很方便。
微信小程序,实现 watch 属性,监听数据变化相关推荐
- 微信小程序实现watch属性监听数据变化
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...
- 微信小程序实现watch监听数据变化
起因:众所周知,微信小程序的数据监听器observers只能在自定义组件中使用,如果想要在页面中实现类似的功能,就只有通过其他的方法.其一就是通过模拟vue的watch来监听数据变化. 实现如下: 1 ...
- 微信小程序使用watch监听数据变化
众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...
- Uniapp-微信小程序实现全局事件监听并进行数据埋点
Uniapp-微信小程序实现全局事件监听并进行数据埋点 零.前言 最近接到需求,领导希望使用微信开放平台上免费的We分析进行数据埋点,但又不希望在现有uniapp开发的微信小程序代码上做侵入式修改,笔 ...
- 小程序组件中的监听事件
小程序组件中的监听事件 需求: 微信小程序中,如果进行使用了component级的组件的话,在一些情况下,父组件中使页面中的数据进行变化,子组件中 的数据不会一起变化,由此可以使用该方法 方法: 使用 ...
- 微信小程序菜品做法展示数据库设计_微信小程序结合后台数据管理实现商品数据的动态展示、维护...
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,本篇随笔介绍微信小程序结合后台数据管理实现商品数据的动态展示.维护,介绍如何实现商品数据在后台管理系统中的维护管理,并通 ...
- 微信小程序wx.request请求服务器json数据并渲染到页面
微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx ...
- 微信小程序|area组件使用的地址数据文件plus
area组件使用的地址数据文件 前言 1.解析json的地址转换为area.js的格式 2.转换格式的java代码 3.运行结果截图示意 前言 实战篇内容参考: 1.腾讯的全球地址数据文件及Xml-& ...
- 微信小程序链接后台接口,进行数据交互
微信小程序链接后台接口,进行数据交互 新手学微信小程序,设计页面还可以,有没有让进行数据交互的时候就不知道怎么弄了,下面就记录一下我是怎么进行交互的 1.登陆微信小程序平台,进入首页,点击开发设置 2 ...
最新文章
- HashMap 在并发下可能出现的问题分析!
- hdu4454 三分 求点到圆,然后在到矩形的最短路
- 在使用Cocos2d-JS 开发过程中需要用到的单体设计模式
- Python读取excel文件可读取xlsx格式和xls格式可直接读取超链接,读出为字典格式(列表套字典),处理合并单元格的问题
- 又拍网架构中的分库设计
- Asp.net页面生存周期
- 【JS 逆向百例】反混淆入门,某鹏教育 JS 混淆还原
- 执行git push出现Everything up-to-date
- 在ubuntu中使用cv2.imshow()报错 No protocol specified qt.qpa.xcb: could not connect to display :0
- 算法总结之递推与递归
- CodeVs天梯钻石Diamond题解
- 计算机网络工程安装,一种计算机网络工程用施工平台的制作方法
- 实战Vue:ToDoList
- Android 自动接听 adb,GitHub - AndroidMsky/RootPlay: 安卓手机秒变网络摄像头,自动接起QQ视频。欢迎star,fork,Issues。...
- 修复40G的老IDE硬盘
- Vue实现 侧边固定定位图标 滑动隐藏
- Linux没有网怎么解决。
- 微服务实施笔记(二)——搭建实验部署环境
- 愿你三冬暖,愿你春不寒
- 用户登录、注册(基于MyBatis+CSS+HTML+Selvet)
热门文章
- c语言补全 subilme_Sublime Text3 C语言插件
- 马云马化腾,过的哪个冬
- php5.6non thread safe 区别,PHP版本Non Thread Safe和Thread Safe如何选择?区别是什么?
- options请求_前端数据请求的终极方案
- python 残差图_python 残差图
- 苍溪师范94级计算机与文秘专业就业前景,文秘专业就业前景
- atm系统的用例模型_战斗系统执行式测试经验汇总
- mina mysql_Mina学习笔记(二)
- change element 原始值_change-element
- java 移动页面中的图片上传_HTML5移动端图片上传(一)