小程序使用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 相关文章推荐
基于jquery的多功能软键盘插件
Jul 25 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
jquery不常用方法汇总
Jul 26 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 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几个数学计算的内部函数学习整理
2011/08/06 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
为数据添加append,remove功能
2006/10/03 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
医科大学生毕业的自我评价分享
2013/11/12 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
农村党员一句话承诺
2014/05/30 职场文书
励志演讲稿500字
2014/08/21 职场文书
行政助理岗位职责
2015/02/10 职场文书
学术会议领导致辞
2015/07/29 职场文书
保姆聘用合同
2015/09/21 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server