微信小程序实现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 相关文章推荐
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
创建一个类Person的简单实例
May 17 Javascript
jquery编写日期选择器
Mar 16 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
vue组件开发之slider组件使用详解
Aug 21 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
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
Python实现随机漫步功能
2018/07/09 Python
通过shell+python实现企业微信预警
2019/03/07 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
如何理解Python中包的引入
2020/05/29 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
广告学专业应届生求职信
2013/10/01 职场文书
期末自我鉴定
2014/01/23 职场文书
教师个人剖析材料
2014/02/05 职场文书
遗嘱继承公证书
2014/04/09 职场文书
芙蓉镇观后感
2015/06/10 职场文书