小程序模板網(wǎng)

微信小程序模板監(jiān)聽數(shù)據(jù)變化

發(fā)布時(shí)間:2021-06-07 08:51 所屬欄目:小程序開發(fā)教程

在微信小程序模板實(shí)現(xiàn) watch 屬性,監(jiān)聽 data 中的屬性,當(dāng)被監(jiān)聽屬性的值改變時(shí),執(zhí)行我們指定的方法。??

思路

Vue 的 computed 和 watch 可以很方便的檢測(cè)數(shù)據(jù)的變化,從而做出相應(yīng)的改變,所以,模仿 vue 肯定是一個(gè)不錯(cuò)的選擇。

與 Vue 一樣,我們使用 ES5 的 Object.defineProperty() 方法,劫持對(duì)象的 getter/setter ,從而實(shí)現(xiàn)給對(duì)象賦值時(shí)(調(diào)用 setter),執(zhí)行 watch 對(duì)象中相對(duì)應(yīng)的函數(shù),達(dá)到監(jiān)聽效果。

代碼

不啰嗦,上代碼,真實(shí)可用。

function observe(obj, key, watchFun, deep, page) {
  let val = obj[key];

  if (val != null && typeof val === "object" && deep) {
    Object.keys(val).forEach((item) => {
      observe(val, item, watchFun, deep, page);
    });
  }

  Object.defineProperty(obj, key, {
    configurable: true,
    enumerable: true,
    set: function(value) {
      watchFun.call(page, value, val);
      val = value;

      if (deep) {
        observe(obj, key, watchFun, deep, page);
      }
    },
    get: function() {
      return val;
    }
  });
}

export function setWatcher(page) {
  let data = page.data;
  let watch = page.watch;

  Object.keys(watch).forEach((item) => {
    let targetData = data;
    let keys = item.split(".");

    for (let i = 0; i < keys.length - 1; i++) {
      targetData = targetData[keys[i]];
    }

    let targetKey = keys[keys.length - 1];

    let watchFun = watch[item].handler || watch[item];

    let deep = watch[item].deep;
    observe(targetData, targetKey, watchFun, deep, page);
  });
}

注意事項(xiàng):

  • watch 只能監(jiān)聽已存在的屬性,數(shù)組的 push() , pop() 等方法并不會(huì)觸發(fā)監(jiān)聽函數(shù)。

使用

import * as watch from "./watch.js";

Page({
  data: {
    name: "二狗子"
  },

  onLoad() {
    watch.setWatcher(this);
  },

  watch: {
    name: function(newVal, oldVal) {
      console.log(newVal, oldVal);
    }
  }
});
  • 首先在需要的頁(yè)面引入
  • 在 Page 的 onLoad 鉤子設(shè)置監(jiān)聽器

然后就可以愉快的使用了。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/26104.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢