微信小程序实现数值监听(页面和组件属性)

简介

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

为什么需要监听属性值

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

实现方法

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

javascript 复制代码
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。

javascript 复制代码
import { setWatcher } from '../../utils/watch';

3、初始化监听方法

javascript 复制代码
setWatcher(this);//可以放进onload或者input里面等

4、写入监听方法

javascript 复制代码
//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然后监听属性值即可。大大提高开发的效率。有不足之处望指正修改,一起探讨哦~!

相关推荐
liangshanbo121521 小时前
写好 React useEffect 的终极指南
前端·javascript·react.js
木易 士心1 天前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
哆啦A梦15881 天前
搜索页面布局
前端·vue.js·node.js
_院长大人_1 天前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
软件技术员1 天前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
future_studio1 天前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
Q_Q5110082851 天前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
哆啦A梦15881 天前
axios 的二次封装
前端·vue.js·node.js
小Tomkk1 天前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar
阿珊和她的猫1 天前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式