微信小程序实现watch监听

 更新时间:2020年06月04日 10:53:57   作者:staysober  
这篇文章主要介绍了微信小程序实现watch监听,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解webpack2异步加载套路

    详解webpack2异步加载套路

    这篇文章主要介绍了详解webpack2异步加载套路,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 用javascript操作xml

    用javascript操作xml

    用javascript操作xml...
    2006-11-11
  • 微信小程序wx:for和wx:for-item的用法详解

    微信小程序wx:for和wx:for-item的用法详解

    这篇文章主要介绍了微信小程序wx:for和wx:for-item的正确用法,wx:for是循环数组,wx:for-item即给列表赋别名,文中给大家列出来几个错误用法,大家一起学习下
    2018-04-04
  • 浅谈通过JS拦截 pushState和replaceState事件

    浅谈通过JS拦截 pushState和replaceState事件

    下面小编就为大家带来一篇浅谈通过JS拦截 pushState和replaceState事件。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS如何获取浏览器声音、麦克风以及通知权限

    JS如何获取浏览器声音、麦克风以及通知权限

    在我们开发网页的时候偶尔会有需要用户录音的情况,下面这篇文章主要给大家介绍了关于JS如何获取浏览器声音、麦克风以及通知权限的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • JavaScript编码风格精选指南(编写可维护的代码规范)

    JavaScript编码风格精选指南(编写可维护的代码规范)

    javascript编码规范能够增强代码的简洁性、可读性、可扩展性,项目做到后期,每修改一次,所耗费的成本就越高,编码规范能节省这样的成本,并且能很好拓展升级原有系统功能,javascript编码规范也是开源社区大家约定俗成的规则!
    2024-06-06
  • Three.js利用Detector.js插件如何实现兼容性检测详解

    Three.js利用Detector.js插件如何实现兼容性检测详解

    这篇文章主要给大家介绍了关于Three.js利用Detector.js插件如何实现兼容性检测的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-09-09
  • js实现按Ctrl+Enter发送效果

    js实现按Ctrl+Enter发送效果

    按Ctrl+Enter发送,思路是监听textarea的onkeydown事件,当ctrl键被按下,并且,keycode为13(回车),时,调用发送表单的函数
    2014-09-09
  • 实现高性能javascript的注意事项

    实现高性能javascript的注意事项

    JavaScript代码在web应用程序中经常用到,但是很多开发者忽视了一些性能方面的知识,如何编写高性能javascript代码呢?接下来,小编跟大家一起学习
    2019-05-05
  • 简单了解TypeScript中如何继承 Error 类

    简单了解TypeScript中如何继承 Error 类

    这篇文章主要介绍了简单了解TypeScript中如何继承 Error 类,一个典型的网站服务器可能需要有 NetworkError, DatabaseError, UnauthorizedError 等。 我们希望这些类都拥有 Error 的特性:有错误消息、有调用栈、有方便打印的 toString 等。,需要的朋友可以参考下
    2019-06-06

最新评论