小程序使用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 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
JavaScript函数获取事件源的小例子
May 14 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
微信小程序实现刷脸登录
May 25 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
浅析javascript 定时器
2014/12/23 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
django model去掉unique_together报错的解决方案
2016/10/18 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
使用Python实现牛顿法求极值
2020/02/10 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
python脚本第一行如何写
2020/08/30 Python
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
超市优秀员工事迹材料
2014/05/01 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
数据库之SQL技巧整理案例
2021/07/07 SQL Server
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android