小程序使用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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
js 颜色选择插件
Jan 23 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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 远程图片保存到本地的函数类
2008/12/08 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
javascript 写类方式之八
2009/07/05 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
JQuery优缺点分析说明
2011/04/10 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
营销与策划个人求职信
2013/09/22 职场文书
大学生水文观测实习自我鉴定
2013/09/29 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
学习保证书100字
2015/02/26 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL