小程序使用仿vue使用watch函数

watch,js

/*** 设置Watcher* @param {Object} page - 页面对象*/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];// 假设key==='my.name',此时nowData===data['my']===data.my,lastKey==='name'let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法let deep = watch[v].deep; // 若未设置deep,则为undefineobserve(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey})}/*** 监听属性并执行监听函数* @param {Object} obj - 要监听的对象* @param {string} key - 要监听的属性键* @param {Function} watchFun - 监听函数* @param {boolean} deep - 是否深度监听* @param {Object} page - 页面对象*/function observe(obj, key, watchFun, deep, page) {let val = obj[key];// 判断deep是true 且 val不能为空 且 typeof val==='object'(数组内数值变化也需要深度监听)if (deep && val != null && typeof val === 'object') { Object.keys(val).forEach(childKey=>{ // 遍历val对象下的每一个keythis.observe(val,childKey,watchFun,deep,page); // 递归调用监听函数})}let that = this;Object.defineProperty(obj, key, {configurable: true,enumerable: true,set: function(value) {// 用page对象调用,改变函数内this指向,以便this.data访问data内的属性值watchFun.call(page,value,val); // value是新值,val是旧值val = value;if(deep){ // 若是深度监听,重新监听该对象,以便监听其属性。that.observe(obj, key, watchFun, deep, page); }},get: function() {return val;}})}module.exports = {setWatcher}

app.js设置全局

const watch = require("./utils/watch")
App({setWatcher(page){watch.setWatcher(page);
},

具体页面使用

    onLoad: function () {app.setWatcher(this)},watch: {//setData了textArray即会触发watchtextArray(newValue, oldValue) {console.log(newValue,oldValue);}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/623564.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C函数详解 | 函数的作用、定义与声明、函数的调用、函数与指针

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

RISC-V是如何与X86、ARM三分天下

目录 1.行业CPU指令集格局 2.汽车中的RISC-V进展 2.1 国际进展 2.2 国内进展 3.小结 2023年3月2日&#xff0c;在平头哥牵头举办的玄铁RISC-V生态大会上&#xff0c;工程院院士倪光南表示&#xff0c;基于RISC-V模块化、可扩展、容易定制、不受垄断制约等优势&#xff0c;…

rime中州韵小狼毫 保姆级安装配置教程 100种增强功能

教程目录&#xff1a;rime中州韵小狼毫须鼠管安装配置教程 保姆级教程 100增强功能配置教程 零基础教学&#xff0c;由前入深&#xff0c;手把手配置rime&#xff0c;100增强功能非你莫属 &#x1f387; &#x1f449; rime中州韵小狼毫 输入效果 rime中州韵小狼毫 输入效果一…

使用百度网盘 不小心下载多了一份文件 几千个文件夹 递归查询删除重复下载的元素

使用python 编写代码 因为百度网盘下载的第二份文件里包含 (1). 只需要递归遍历删除所包含(1).的文件夹 一下是实现代码 import osdef delete_files_with_pattern(folder_path, pattern):for root, dirs, files in os.walk(folder_path):for file in files:file_path os.path…

电商API接口|Javascript抓取京东、淘宝商品数据

“ 不知怎么建站&#xff1f;就找怎么建站&#xff01; ” 背景&#xff1a; EDI许可证网站和ICP许可证网站需要有丰富的商品数据来应付EDI、ICP许可证下证审核。下面介绍的这种方法是我之前主要的抓取数据的方法&#xff0c;大概用了一年多。这几天又对这个方法进行了一些优…

11.云原生分布式数据库之TIDB

云原生专栏大纲 文章目录 为什么使用TIDB后端视角运维视角基础架构视角 TiDB Operator 简介软件版本要求部署tidbTIDB工具helm常用命令TIDB学习推荐资料 为什么使用TIDB 从后端视角、运维视角和基础架构视角来看&#xff0c;使用 TiDB 作为数据库系统可以获得分布式架构、高可…

学习Java API(二):基础知识点一文通✅

推荐阅读 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;一&#xff09; 智能化校园&#xff1a;深入探讨云端管理系统设计与实现&#xff08;二&#xff09; 文章目录 推荐阅读正则表达式正则表达式语法捕获组和分组matches 和 lookingAt 方法split方法r…

LeeCode前端算法基础100题(20)找出字符串中第一个匹配项的下标

一、问题详情: 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下标从 0 开始)。如果 needle 不是 haystack 的一部分,则返回 -1 。 示例 1: 输入:haystack = "sadbutsad", needle = "s…

安全生产管理平台——革新传统安全生产管理方式,重塑企业安全文化

安全生产管理在现代企业中占据着至关重要的地位。传统的安全生产管理方式虽然在一定程度上能够保障企业的生产安全&#xff0c;但随着企业规模的不断扩大和生产环境的日益复杂&#xff0c;其局限性也愈发凸显。而安全生产管理平台的出现&#xff0c;正是为了解决这一问题。 平台…

从六西格玛到DFSS:提升企业创新能力的关键方法——张驰咨询

DFSS&#xff08;Design for Six Sigma&#xff0c;即六西格玛设计&#xff09;是一种结合了六西格玛思想和创新设计方法的质量管理方法。它的目标是在产品或服务的设计阶段&#xff0c;通过优化设计过程和减少变异性&#xff0c;以确保产品或服务达到高质量水平&#xff0c;满…

Linux多网卡绑定实现负载均衡详解

将多块网卡绑定同一IP地址对外提供服务&#xff0c;可以实现高可用或者负载均衡。直接给两块网卡设置同一IP地址是不可以的。通过 bonding&#xff0c;虚拟一块网卡对外提供连接&#xff0c;物理网卡的被修改为相同的MAC地址。 目录 1、bond的作用 2、Bonding聚合链路工作模…

反射助你无痛使用Semantic Kernel接入离线大模型

本文主要介绍如何使用 llama 的 server 部署离线大模型&#xff0c;并通过反射技术修改 Semantic Kernel 的 OpenAIClient 类&#xff0c;从而实现指定端点的功能。最后也推荐了一些学习 Semantic Kernel 的资料&#xff0c;希望能对你有所帮助。 封面图片&#xff1a; Dalle3 …

win开发Golang

目录 编译exeVscode开发 编译exe go build main.go编译的exe文件点击后会有cmd弹窗&#xff0c;如果去掉弹框&#xff0c;使用编译命令&#xff1a; go build -ldflags"-Hwindowsgui" -o name.exe main.go 或 go build -ldflags"-s -w -H windowsgui" -…

软信天成:数据安全管理解决方案分享

近年来&#xff0c;随着数据环境日趋复杂多变和潜在的数据隐私泄露风险潜伏&#xff0c;如何确保企业数据安全已成为众多企业亟待面对与妥善处理的重要问题。 为了应对这一严峻的现实挑战&#xff0c;软信天成凭借专业的知识体系和丰富的实战经验积累&#xff0c;总结出了一套…

Java多线程并发篇----第十四篇

系列文章目录 文章目录 系列文章目录前言一、ReadWriteLock 读写锁二、共享锁和独占锁三、重量级锁(Mutex Lock)四、轻量级锁前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给…

【iconfont图标】快速全选

https://www.iconfont.cn/collections/detail?spma313x.collections_index.i1.d9df05512.9f173a81W5lQnf&cid19238 1.控制台粘贴回车 var jdocument.createElement(script);j.setAttribute("src", https://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js);…

Golang 打包

构建/打包 使用 Go 的构建命令&#xff1a; go build在包含 main 函数的包的目录下执行&#xff0c;它会生成一个可执行文件。文件名默认与包所在的目录名相同&#xff0c;但也可以使用 -o 选项来指定输出的文件名 交叉编译 Windows 环境下进行交叉编译以构建其他平台的可执…

Spring MVC中的一些常用注解

目录 RequestMapping 实现路由映射 限制请求方式 PathVariable 从url中获取变量的值 更改绑定参数的名字 RequestParam 可以传递集合 更改绑定参数的名字 可修改是否为必传参数 RequestBody 获取请求正文的内容 可修改是否为必传参数 RequestPart 可以支持上传…

ubuntu服务日志分析——journalctl

简介 对于使用 systemd 服务的 Linux 发行版来说&#xff0c;journalctl 命令提供了详细且经过筛选的日志视图&#xff0c;是获取 Linux 重启历史记录的得力工具 systemd帮助我们记录了系统在运行过程中的所有日志信息&#xff0c;无论是重启前还是重启后&#xff0c;都会有保…

Animation的坑,播放的时候隐藏了UI界面,结果再次把UI界面显示出来后,就会卡在动画的某处

local animation obj:GetComponent("Animation") local state animation.this:get(name) if state then state.speed state.length end animation:Play(name);