微信小程序实现watch监听


Posted in Javascript onJune 04, 2020

Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch。

虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦...)。

小程序实现 类似vue 一样的watch 监听数据

将方法注册到app.js 中也可以使用高级一点的写法

使用装饰器模式将小程序page 重写挂在到生命周期函数上或者挂在页面this 上每次就不需要重新在调用初始化一次。本文对装饰器模式不做介绍这是个思路。等待下次实现

setWatcher(page) {
   let data = page.data; // 获取page 页面data
   let watch = page.watch;
   for(let i in watch){
     let key = i.split('.'); // 将watch中的属性以'.'切分成数组
     let nowData = data; // 将data赋值给nowData
     let lastKey = key[key.length - 1];
     let watchFun = watch[i].handler || watch[i]; // 兼容带handler和不带handler的两种写法
     let deep = watch[i].deep; // 若未设置deep,则为undefine
     this.observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey
     }
 },
 /\*\*
 \* 监听属性 并执行监听函数
 \*/
   observe(obj, key, watchFun, deep, page) {
     let val = obj[key];
     // 判断deep是true 且 val不能为空 且 typeof val==='object'(数组内数值变化也需要深度监听)
     if (deep && val != null && typeof val === 'object') {
     for(let i in val){
     this.observe(val, i, watchFun, deep, page); // 递归调用监听函数
   }
 }
   let that = this;
   Object.defineProperty(obj, key, {
   configurable: true,
   enumerable: true,
   set: function (value) {
     // 用page对象调用,改变函数内this指向,以便this.data访问data内的属性值
     watchFun.call(page, value, val); // value是新值,val是旧值
     val = value;
     if (deep) { // 若是深度监听,重新监听该对象,以便监听其属性。
      that.observe(obj, key, watchFun, deep, page);
     }
   },
   get: function () {
    return val;
   }
   })
 }

页面使用:

onLoad: function () {
   app.setWatcher(this);
     setTimeout(()=>{
     this.setData({
     name:"kangbosodoa"
     })
   },2000)
   },
   watch: {
     name: {
     handler(newValue,oldvalue) {
     console.log(this)
     console.log(newValue,oldvalue,"变化了");
     },
    deep: true
   },
   type:{
     handler(newValue) {
     console.log(newValue,"属性发生变化");
     },
    deep: true // 是否深度监听
   }
 },

到此这篇关于微信小程序实现watch监听的文章就介绍到这了,更多相关小程序watch监听内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中关于执行环境的杂谈
Aug 14 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
jQuery ajax应用总结
Jun 02 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
详解Vue之计算属性
Jun 20 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 #Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 #Javascript
vue基础知识--axios合并请求和slot
Jun 04 #Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 #Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 #Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 #Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 #Javascript
You might like
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
跨浏览器的事件对象介绍
2012/06/27 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
使用python编写监听端
2018/04/12 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python日期相关操作实例小结
2019/06/24 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
会计的岗位职责
2014/03/15 职场文书
超市周年庆活动方案
2014/08/16 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2014年转正工作总结
2014/11/08 职场文书
英语导游词
2015/02/13 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers