微信小程序watch监听, 类似vue的watch
Vue.js里有watch监听机制,很适合“一处改变,多处影响”的场景,在开发小程序的过程中,自然也会遇到这样的场景,下面介绍如何在小程序中实现watch监听
不好用你来打我!
一. 新建 watch.js
// watch.js const observe = (obj, key, watchFun, deep, page) => { let oldVal = obj[key] // 如果监听对象是object类型并且指定deep(深度监听) if (oldVal !== null && typeof oldVal === 'object' && deep) { // 递归子集,依次执行observe() Object.keys(oldVal).forEach(item => { observe(oldVal, item, watchFun, deep, page) }) } // 使用Object.defineProperty()劫持数据的写操作,在监听对象改变后执行传入的watchFun Object.defineProperty(obj, key, { configurable: true, enumerable: true, set(value) { if (value === oldVal) return watchFun.call(page, value, oldVal) oldVal = value }, get() { return oldVal } }) } export const setWatcher = (page) => { // 页面里的data字段 const data = page.data // 页面里的watch字段 const watch = page.watch // 对watch里列举的每一个字段(需要监听的字段)执行observe() Object.keys(watch).forEach(key => { let targetData = data const targetKey = key // 支持deep深度监听,使用deep时需要配合handler使用,否则直接编写函数 const watchFun = watch[key].handler || watch[key] const deep = watch[key].deep observe(targetData, targetKey, watchFun, deep, page) }) }
二. 引入 使用
在需要使用监听机制页面的js文件的 onLoad
钩子里,执行setWatcher
,并传入当前页面实例this
,完成初始化。
添加watch对象,内部写入需要被监听的字段以及执行函数:
// test.js import { setWatcher } from '../../watch.js' Page({ data: { foo:false }, watch: { // 需要监听的字段 foo(val) { console.log('foo变化了,变化后的值是', val) // 具体操作=>doSomething } }, // watch初始化,传入当前页面实例this onLoad() { setWatcher(this) } })
更多参考: https://www.jianshu.com/p/34c2403a7a1c
那时候我只有一台录音机也没有电脑 也不敢奢求说唱会让自己的生活变好