小程序使用watch監(jiān)聽(tīng)數(shù)據(jù)變化的方法詳解

更新時(shí)間：2019年09月20日 11:04:15 作者：jANE2160

這篇文章主要介紹了小程序使用watch監(jiān)聽(tīng)數(shù)據(jù)變化的方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

眾所周知，Vue中，可以使用監(jiān)聽(tīng)屬性 watch來(lái)觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變化，那么小程序能不能實(shí)現(xiàn)這一點(diǎn)呢？

監(jiān)聽(tīng)器的原理，是將data中需監(jiān)聽(tīng)的數(shù)據(jù)寫(xiě)在watch對(duì)象中，并給其提供一個(gè)方法，當(dāng)被監(jiān)聽(tīng)的數(shù)據(jù)的值改變時(shí)，調(diào)用該方法。

我們需要用到Javascript中的Object.defineProperty()方法，來(lái)手動(dòng)劫持對(duì)象的getter/setter，從而實(shí)現(xiàn)給對(duì)象賦值時(shí)(調(diào)用setter)，執(zhí)行watch對(duì)象中相對(duì)應(yīng)的函數(shù)，達(dá)到監(jiān)聽(tīng)效果。

Object.defineProperty()方法，會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性，并返回這個(gè)對(duì)象。

這里假定有多個(gè)頁(yè)面需要監(jiān)聽(tīng)需求，把監(jiān)聽(tīng)方法寫(xiě)在app.js中，以便全局調(diào)用

onLaunch: function () {},
// 設(shè)置監(jiān)聽(tīng)器
watch: function (ctx, obj) {
 Object.keys(obj).forEach(key => {
  this.observer(ctx.data, key, ctx.data[key], function (value) {
   obj[key].call(ctx, value)
  })
 })
},
// 監(jiān)聽(tīng)屬性，并執(zhí)行監(jiān)聽(tīng)函數(shù)
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
  },
 })
}

然后，在需要監(jiān)聽(tīng)的頁(yè)面onLoad中，調(diào)用watch方法（其中test是要監(jiān)聽(tīng)的數(shù)據(jù)，當(dāng)test在其他方法中通過(guò)this.setData賦值后，watch就能監(jiān)聽(tīng)到test的變化了）

const app = getApp()
Page({
 data: {
  test: 0
 },
 onLoad: function () {
  // 調(diào)用監(jiān)聽(tīng)器，監(jiān)聽(tīng)數(shù)據(jù)變化
  app.watch(this, {
   test: function (newVal) {
    console.log(newVal)
   }
  })
 }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js控制web打印(局部打印)方法整理
本文整理了一些常用的web打印及局部打印的方法以備不時(shí)之需，感興趣的朋友可以學(xué)習(xí)下
2013-05-05
用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇用原生JS對(duì)AJAX做簡(jiǎn)單封裝的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-07-07
Three.js中矩陣和向量的使用教程
這篇文章主要給大家介紹了關(guān)于Three.js中矩陣和向量使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
js如何構(gòu)造elementUI樹(shù)狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解
由于業(yè)務(wù)需要，要求實(shí)現(xiàn)樹(shù)形菜單，且菜單數(shù)據(jù)由后臺(tái)返回，下面這篇文章主要給大家介紹了關(guān)于js如何構(gòu)造elementUI樹(shù)狀菜單的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下
2021-05-05
javascript驗(yàn)證完全方法具體實(shí)現(xiàn)
下面這段代碼完全實(shí)現(xiàn)了判斷是否合格.傳入號(hào)碼就行了,包括了算法,下面的是用Ext實(shí)現(xiàn)的,但是基于javascript的語(yǔ)法居多,基本都可以用
2013-11-11
javascript實(shí)現(xiàn)的閉包簡(jiǎn)單實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)的閉包簡(jiǎn)單實(shí)現(xiàn)方法,涉及javascript閉包的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁(yè)功能實(shí)例代碼
這篇文章主要介紹了Angular+Bootstrap+Spring Boot實(shí)現(xiàn)分頁(yè)功能實(shí)例代碼,需要的朋友可以參考下
2017-07-07
JavaScript實(shí)現(xiàn)單鏈表過(guò)程解析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)單鏈表過(guò)程，鏈表中的元素在內(nèi)存中不必是連續(xù)的空間。鏈表的每個(gè)元素有一個(gè)存儲(chǔ)元素本身的節(jié)點(diǎn)和指向下一個(gè)元素的引用。下面請(qǐng)和小編一起進(jìn)入文章了解更多的詳細(xì)內(nèi)容吧
2021-12-12
JavaScript實(shí)現(xiàn)AOP詳解(面向切面編程,裝飾者模式)
下面小編就為大家分享一篇JavaScript實(shí)現(xiàn)AOP的方法(面向切面編程,裝飾者模式)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
面向?qū)ο驤avascript核心支持代碼分享
Javascript做面向?qū)ο箝_(kāi)發(fā)的時(shí)候，總是會(huì)用到很多模擬面向?qū)ο筇匦缘姆椒ǎ@些方法就構(gòu)成了支撐面向?qū)ο驤avascript的核心代碼
2012-05-05