简介

目前文章主要介绍对页面属性值的监听以及组件属性值的监听。需要异页面监听数据，请跳转至另一个文章介绍

为什么需要监听属性值

当需要通过一个属性变化时候，需要计算相应的方法等。pc网站经常需要监听属性，那么小程序应该怎么去实现？

实现方法

1、首先创建公共的watch.js

export function setWatcher(page) {let data = page.data;let watch = page.watch;Object.keys(watch).forEach(v => {let key = v.split('.');let nowData = data;for (let i = 0; i < key.length - 1; i++) {nowData = nowData[key[i]];}let lastKey = key[key.length - 1];let watchFun = watch[v].handler || watch[v];let deep = watch[v].deep;observe(nowData, lastKey, watchFun, deep, page);})
}function observe(obj, key, watchFun, deep, page) {var val = obj[key];if (deep && val != null && typeof val === 'object') {Object.keys(val).forEach(childKey => {observe(val, childKey, watchFun, deep, page);})}Object.defineProperty(obj, key, {configurable: true,enumerable: true,set: function(newVal) {watchFun.call(page, newVal, val); val = newVal;if (deep) {observe(obj, key, watchFun, deep, page);}},get: function() {return val;}})
}
module.exports = {setWatcher: setWatcher
}

2、在页面引用公共的watch.js。

import { setWatcher } from '../../utils/watch';

3、初始化监听方法

setWatcher(this);//可以放进onload或者input里面等

4、写入监听方法

//page页面
watch: {val(v) {console.log(v)},count: {//监听count属性值handler(v,o) {console.log('新值：'+v,'旧值：'+o)if(v!==o){console.log('被改了')}else{console.log('没改')}},deep: true}},
//组件就调用observe方法

小结

微信小程序监听属性值非常的简单，只需要调用公共的js然后监听属性值即可。大大提高开发的效率。有不足之处望指正修改，一起探讨哦~！