小程序使用watch监听数据变化的方法详解


Posted in Javascript onSeptember 20, 2019

众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢?

监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法,当被监听的数据的值改变时,调用该方法。​​

我们需要用到Javascript中的Object.defineProperty()方法,来手动劫持对象的getter/setter,从而实现给对象赋值时(调用setter),执行watch对象中相对应的函数,达到监听效果。

Object.defineProperty()方法,会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

这里假定有多个页面需要监听需求,把监听方法写在app.js中,以便全局调用

onLaunch: function () {},
// 设置监听器
watch: function (ctx, obj) {
 Object.keys(obj).forEach(key => {
  this.observer(ctx.data, key, ctx.data[key], function (value) {
   obj[key].call(ctx, value)
  })
 })
},
// 监听属性,并执行监听函数
observer: function (data, key, val, fn) {
 Object.defineProperty(data, key, {
  configurable: true,
  enumerable: true,
  get: function () {
   return val
  },
  set: function (newVal) {
   if (newVal === val) return
   fn && fn(newVal)
   val = newVal
  },
 })
}

然后,在需要监听的页面onLoad中,调用watch方法(其中test是要监听的数据,当test在其他方法中通过this.setData赋值后,watch就能监听到test的变化了)

const app = getApp()
Page({
 data: {
  test: 0
 },
 onLoad: function () {
  // 调用监听器,监听数据变化
  app.watch(this, {
   test: function (newVal) {
    console.log(newVal)
   }
  })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态添加删除表格行的js实现代码
Feb 28 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 #Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 #Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 #Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 #Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 #Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 #Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 #Javascript
You might like
PHP cron中的批处理
2008/09/16 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
微信小程序实现多图上传
2020/06/19 Javascript
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
ECHT官方网站:男女健身服
2020/02/14 全球购物
简历的自我评价
2014/02/03 职场文书
文员求职信
2014/07/15 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
2014年路政工作总结
2014/12/10 职场文书
校运会宣传稿大全
2015/07/23 职场文书