微信小程序实现类Vue-watch数据监听

这篇具有很好参考价值的文章主要介绍了微信小程序实现类Vue-watch数据监听。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 在 app.js 里了定义一个全局函数,当然也可以单独写一个模版,再通过引入模块的方式来调用

// 监听页面数据变化
initWatch(_page) {
    if (!_page) {
        console.error('未检测到Page对象,请将当前page传入该函数');
        return false;
    }
    if (!_page.watch) { //判断是否有需要监听的字段
        console.error('未检测到Page.watch字段(如果不需要监听,请移除initWatch的调用片段)');
        return false;
    }
    let _dataKey = Object.keys(_page.data);
    Object.keys(_page.watch).map((_key) => { //遍历需要监听的字段
        _page.data['__' + _key] = _page.data[_key]; //存储监听的数据
        if (_dataKey.includes(_key)) { //如果该字段存在于Page.data中,说明合法
            Object.defineProperties(_page.data, {
                [_key]: { //被监听的字段
                    enumerable: true,
                    configurable: true,
                    set: function(value) {
                        let oldVal = this['__' + _key];
                        if (value !== oldVal) { //如果新设置的值与原值不等,则触发监听函数
                            setTimeout(function() { //为了同步,否则如果回调函数中有获取该字段值数据时将不同步,获取到的是旧值
                                _page.watch[_key].call(_page, oldVal, value); //设置监听函数的上下文对象为当前的Page对象并执行
                            }.bind(this), 0)
                        }
                        this['__' + _key] = value;
                    },
                    get: function() {
                        return this['__' + _key]
                    }
                }
            })
        } else {
            console.error('监听的属性[' + _key + ']在Page.data中未找到,请检查~')
        }
    })
}

2. 在具体页面里调用 initWatch 函数,并编写要watch的相关字段

const app = getApp()
Page({
    data: {
        currYear: ''
    },
    watch: {
    	// 需要监听的字段
        'currYear': function (value) {
            console.log('监听数据-currYear', value, this)
            // ......
        }
    },
    onLoad() {
        app.initWatch(this) // 初始化需要监听的字段
    }
})

参考链接文章来源地址https://www.toymoban.com/news/detail-518503.html

到了这里,关于微信小程序实现类Vue-watch数据监听的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue watch监听多个数据

    项目驱动 在自己工作的某个项目中,之前基本都是使用watch监听单个数据。 但是后面在一个echarts的项目中,使用了三个echarts图表,而三个图表需要根据用户的选择条件同时更新,而后端传过来的数据我们需要分割成两个数组,这个时候,单独监听一个数组已经达不到项目需

    2024年02月15日
    浏览(37)
  • vue watch监听数据变化

    监听数据变化,在Vue中是通过侦听器来实现的,你也可以将它理解为监听器,时刻监听某个数据的变化 这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置: 侦听器更多的是用在异步操作中,所谓异步操作就是数据返回有所延迟的操作,比如说我们要请

    2024年02月12日
    浏览(45)
  • vue中使用watch监听同时监听两个数据

    使用场景,创建一个子组件,父组件会向子组件中穿递一个状态 - \\\"status\\\" ,子组件需要同时监听this.$route.params中的值和status,然后再去调方法,所以需要同时监听

    2024年02月11日
    浏览(45)
  • 微信小程序的数据监听器

    数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中,数据监听器的基本语法格式如下。 Component({   observers: {     \\\'字段A, 字段B\\\': function (字段A的新值, 字段B的新值) {       // do something  

    2024年02月09日
    浏览(70)
  • 微信小程序 自定义全局事件监听实现

    一般app页面都需要关联刷新,比如登录后刷新登录前页面,故此,需要一个全局事件监听类,怎么实现呢? 根目录创建文件夹utils,新建文件eventBus.js(致敬java平台的EventBus),码入以下代码: 主要就是newKey、on、off、post方法,分别是创建key、开始监听、结束监听、发出事件

    2024年02月11日
    浏览(46)
  • 监听微信小程序页面的数据变化

    1、数据监听是为了当数据发生变化时,做一些操作; 2、它的作用相当于Vue中的watch 侦听器 先看效果: 第一、先在页面中使用          ①: 创建watch文件         ②:在页面中引入并使用         wxml:         js: 第二:在组件中使用数据监听           ①:wxml:  

    2024年02月16日
    浏览(58)
  • vue3中用watch监听响应式数据的注意点

    如果你在vue3中使用reactive()方法创建响应式数据,然后又用torefs()方法将响应式数据解构成单一的ref响应式数据。 此时,如果你想用watch监听解构出来单一的响应式数据,watch不起作用。 此时,你需要用watch监听之前的reactive()方法创建的数据,这样是能监听到的,要开启深度监

    2024年02月13日
    浏览(40)
  • 微信小程序实现数值监听(页面和组件属性)

    简介 目前文章主要介绍对页面属性值的监听以及组件属性值的监听。需要异页面监听数据,请跳转至另一个文章介绍 为什么需要监听属性值 当需要通过一个属性变化时候,需要计算相应的方法等。pc网站经常需要监听属性,那么小程序应该怎么去实现? 1、首先创建公共的

    2024年02月09日
    浏览(60)
  • 【微信小程序】-- 自定义组件 - 数据监听器 (三十四)

    💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘   大家好,又见面了,

    2024年02月09日
    浏览(48)
  • 微信小程序Page监听数据变化不能使用observers

    众所周知,微信小程序的数据监听器observers只能在自定义组件中使用,如果想要在页面中实现类似的功能,就只有通过其他的方法。其一就是通过模拟vue的watch来监听数据变化。 那么Page中应该怎样监听呢? 1.创建watch.js 新建一个 watch.js 文件存放监听器的逻辑函数,代码如下

    2024年02月13日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包