轉自微信小程序，實現 watch 屬性，監聽數據變化

目標

在微信小程序實現 watch 屬性，監聽 data 中的屬性，當被監聽屬性的值改變時，執行我們指定的方法。??

思路

Vue 的 computed 和 watch 可以很方便的檢測數據的變化，從而做出相應的改變，所以，模仿 vue 肯定是一個不錯的選擇。

與 Vue 一樣，我們使用 ES5 的Object.defineProperty()方法，劫持對象的 getter/setter，從而實現給對象賦值時(調用 setter)，執行 watch 對象中相對應的函數，達到監聽效果。

代碼

不啰嗦，上代碼，真實可用。

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;

<span class="hljs-keyword">if</span> (deep) {observe(obj, key, watchFun, deep, page);} }, <span class="hljs-attr">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{<span class="hljs-keyword">return</span> 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(".");

<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; keys.length - <span class="hljs-number">1</span>; i++) {targetData = targetData[keys[i]]; }<span class="hljs-keyword">let</span> targetKey = keys[keys.length - <span class="hljs-number">1</span>];<span class="hljs-keyword">let</span> watchFun = watch[item].handler || watch[item];<span class="hljs-keyword">let</span> deep = watch[item].deep; observe(targetData, targetKey, watchFun, deep, page); 復制代碼 復制代碼

}); } 復制代碼復制代碼

注意事項：

• watch 只能監聽已存在的屬性，數組的 push()，pop()等方法并不會觸發監聽函數。

使用

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

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

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

復制代碼

watch: { name: function(newVal, oldVal) { console.log(newVal, oldVal); } } }); 復制代碼復制代碼

首先在需要的頁面引入 在 Page 的onLoad鉤子設置監聽器

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

總結

watch 會使代碼更簡潔，邏輯更清晰，在響應式數據處理上很方便。

總結

以上是生活随笔為你收集整理的微信小程序，实现 watch 属性，监听数据变化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。