微信小程序实现watch监听数据变化

起因：众所周知，微信小程序的数据监听器observers只能在自定义组件中使用，如果想要在页面中实现类似的功能，就只有通过其他的方法。其一就是通过模拟vue的watch来监听数据变化。

实现如下：

1.新建一个watch.js文件存放监听器的逻辑函数，代码如下：

/*** 设置监听器*/
export function setWatcher(page) {let data = page.data;let watch = page.watch;Object.keys(watch).forEach(v => {let key = v.split('.'); // 将watch中的属性以'.'切分成数组let nowData = data; // 将data赋值给nowDatafor (let i = 0; i < key.length - 1; i++) { // 遍历key数组的元素，除了最后一个！nowData = nowData[key[i]]; // 将nowData指向它的key属性对象}let lastKey = key[key.length - 1];let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法let deep = watch[v].deep; // 若未设置deep,则为undefineobserve(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey})
}
/**
* 监听属性 并执行监听函数
*/
function observe(obj, key, watchFun, deep, page) {var val = obj[key];// 判断deep是true 且 val不能为空 且 typeof val==='object'（数组内数值变化也需要深度监听）if (deep && val != null && typeof val === 'object') {Object.keys(val).forEach(childKey => { // 遍历val对象下的每一个keyobserve(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.在页面中使用：假如有个同级页面login.js，在该文件中引入watch.js，用法如下:
tips：如果有多个页面都需要使用watch监听，可以直接在app.js中引入该文件，注册成全局函数，这样就不用每个文件都去引入watch.js了，只需要在使用的页面onLoad的时候调用一次该函数，就能愉快的使用watch了。

// 在需要使用的页面引入
import { setWatcher } from './watch.js';
Page({data: {val: '',obj: {},},onLoad() {// 在onload的时候调用一次监听函数，然后就可以像vue一样愉快的使用watch了setWatcher(this);}// 用法完全和vue一样，也能实现对象的深度监听watch: {val(v) {consolfe.log(v)},obj: {handler(v) {console.log(v)},deep: true}}
})

微信小程序实现watch监听数据变化相关推荐

微信小程序使用watch监听数据变化
众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...
微信小程序实现watch监听，无需页面引入！！！
目录 1监听函数实现 2.页面Page重写(实现无需引入) 3完整代码实现 4微信小程序代码片段大家都知道小程序其实和Vue的写法以及原理都存在很大的相同,但是里有watch监听可以监听data定义 ...
H5及微信小程序实测可用——监听手机返回键操作
目录 1.自定义导航(只能拦截左上角返回) 2.内嵌H5实现拦截物理键返回(均可监听) 微信小程序开发过程中我们经常遇到需要监听点击左上角返回.手机物理返回键或者左滑返回的需求微信原生是没有API支 ...
微信小程序全局变量改变监听
问题来源最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面.需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层 ...
微信小程序，实现 watch 属性，监听数据变化
转自微信小程序,实现 watch 属性,监听数据变化目标在微信小程序实现 watch 属性,监听 data 中的属性,当被监听属性的值改变时,执行我们指定的方法. 思路 Vue 的 compu ...
微信小程序-注册登录功能-本地数据保存-页面数据交替
Title:微信小程序-注册登录功能-本地数据保存-页面数据交替完美-小程序登录注册功能.rar-- 访问码:yqa5 1.主页面主页面login.js代码 // pages/login/logi ...
微信小游戏的电量监听
在说小游戏的电量监听事件之前,我想先提一下小程序的电量监听事件. 在微信小程序中,是没有电量监听事件的,因为小程序没有全屏,手机端的电量和wifi等信息一直可以看得到,所以小程序里就没有这样的api了 ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
微信小程序使用echarts实时更新数据以及常见bug
** 微信小程序使用echarts实时更新数据以及常见bug ** 参考echarts官方文档:https://echarts.apache.org/zh/tutorial.html 下载小程序ech ...

微信小程序实现watch监听数据变化

微信小程序实现watch监听数据变化相关推荐

最新文章

热门文章