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

相关文章

  • 使用Webpack构建多页面程序的实现步骤

    使用Webpack构建多页面程序的实现步骤

    这篇文章主要介绍了使用Webpack构建多页面程序的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 图片轮换效果实现代码(点击按钮停止执行)

    图片轮换效果实现代码(点击按钮停止执行)

    在这个实例中需要注意的是,要把images文件夹下图片的命名设置为有顺序的,1、2、3..才可以,感兴趣的朋友可以参考下
    2013-04-04
  • 使用JS实现图片轮播的实例(前后首尾相接)

    使用JS实现图片轮播的实例(前后首尾相接)

    下面小编就为大家带来一篇使用JS实现图片轮播的实例(前后首尾相接)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JS实现iframe自适应高度的方法示例

    JS实现iframe自适应高度的方法示例

    这篇文章主要介绍了JS实现iframe自适应高度的方法,结合实例形式分析了JS实现iframe高度自适应的实现技巧,并给出了项目示例供大家参考,需要的朋友可以参考下
    2017-01-01
  • javascript实现简易数码时钟

    javascript实现简易数码时钟

    这篇文章主要为大家详细介绍了javascript实现简易数码时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 详解JavaScript到TypeScript的转换过程

    详解JavaScript到TypeScript的转换过程

    JavaScript是一门强大而灵活的编程语言,TypeScript作为JavaScript的超集,为开发人员提供了静态类型检查、更好的协作能力和面向对象编程的支持,本文将详细讲解如何将JavaScript代码转换为TypeScript,并写一些代码示例参考
    2023-06-06
  • electron中ipcMain使用示例小结

    electron中ipcMain使用示例小结

    ipcMain模块是Electron架构中实现主进程与渲染进程之间通信的关键部分,ipcMain模块是一个非常重要的组件,本文给大家讲解electron中ipcMain用法示例小结,感兴趣的朋友跟随小编一起看看吧
    2024-04-04
  • javascript的惯性运动实现代码实例

    javascript的惯性运动实现代码实例

    这篇文章主要介绍了javascript的惯性运动实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript使用SpreadJS创建Excel查看器

    JavaScript使用SpreadJS创建Excel查看器

    在现代的Web应用开发中,Excel文件的处理和展示是一项常见的需求,小编今天将为大家展示如何借助SpreadJS来创建一个Excel查看器,感兴趣的小伙伴可以了解下
    2023-12-12
  • JS防抖节流函数的实现与使用场景

    JS防抖节流函数的实现与使用场景

    在行走江湖的过程中,会出现很多性能优化的问题来让你手足无措,那么这篇文章主要给大家介绍了关于JS防抖节流函数的实现与使用场景,针对这两个问题来为你答疑解惑,需要的朋友可以参考下
    2021-07-07

最新评论