微信小程序实现watch属性监听数据变化
时间:2019-08-29
本文章向大家介绍微信小程序实现watch属性监听数据变化,主要包括微信小程序实现watch属性监听数据变化使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
/** * 设置监听器 */ 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]; // 假设key==='my.name',此时nowData===data['my']===data.my,lastKey==='name' 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); // 递归调用监听函数 }) } let that = this; Object.defineProperty(obj, key, { configurable: true, enumerable: true, set: function (value) { watchFun.call(page, value, val); // value是新值,val是旧值 val = value; if (deep) { // 若是深度监听,重新监听该对象,以便监听其属性。 observe(obj, key, watchFun, deep, page); } }, get: function () { return val; } }) } module.exports = { setWatcher: setWatcher }
然后:
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 很重要 watch.setWatcher(this); // 设置监听器,建议在onLoad下调用 }
最后:
// 监听器 watch: { locationInfo: function (newVal, oldVal) { setTimeout(() => { this.setData({ seachValue: newVal.address }) }) } }
原文地址:https://www.cnblogs.com/plBlog/p/11427967.html
- C++从键盘输入文件结束符
- java cpu高达100%问题 排查
- (43) 剖析TreeMap / 计算机程序的思维逻辑
- Spring Cloud第一篇 Eureka简介及原理
- 华为面试题——约瑟夫问题的C++简单实现(循环链表)
- (49) 剖析LinkedHashMap / 计算机程序的思维逻辑
- Python多进程并行编程实践-mpi4py的使用
- 华为面试题——一道关于指针方面的编程题(C/C++)
- Spring Cloud第二篇 创建一个Eureka Server
- 数据挖掘实战(一):Kaggle竞赛经典案例剖析
- 华为面试题——单向链表倒转(一次遍历)
- Flask一步步搭建web应用
- (44) 剖析TreeSet / 计算机程序的思维逻辑
- (46) 剖析PriorityQueue / 计算机程序的思维逻辑
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于暗通道去雾算法
- 全套 | 人脸检测 & 人脸关键点检测 & 人脸卡通化
- 使用Jenkins Dashboard插件可视化部署
- 全面综述:图像特征提取与匹配技术
- opencv+python制作硬核七夕礼物
- opencv+python制作硬核七夕礼物
- 七夕节也要学起来,哈希哈希哈希!
- 目标检测器性能评估工具包
- istio 1.7发布
- AkShare-中国宏观-工业品出厂价格指数
- AkShare-中国宏观-采购经理人指数
- Python 为什么没有 void 关键字?
- 【特征提取+分类模型】4种常见的NLP实践思路
- 霸气!开源项目名字就叫BAT,具有语法高亮的Cat类命令
- 【Python基础系列】常见的数据预处理方法(附代码)