小程序使用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获取页面元素的具体位置
Dec 09 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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中如何调用用户自定义函数
2013/08/06 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
pygame实现弹球游戏
2020/04/14 Python
python 基于opencv去除图片阴影
2021/01/26 Python
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
客户经理岗位职责大全
2015/04/09 职场文书
六年级语文教学反思
2016/03/03 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js