微信小程序实现类似Vue中的computed、watch功能

news2024/11/17 23:44:20

微信小程序实现类似Vue中的computed、watch功能

    • 构建npm
    • 使用

构建npm

  1. 创建包管理器
    进入小程序后,打开终端,点击顶部“视图” - “终端”
    在这里插入图片描述
    新建终端
    在这里插入图片描述
    使用 npm init -y初始化包管理器,生成一个package.json文件
    在这里插入图片描述

  2. 安装 npm 包

    npm install --save miniprogram-computed
    
  3. 构建npm
    点击开发者工具中的菜单栏:工具 --> 构建 npm
    在这里插入图片描述

使用

在自定义组件中,以require的方式引入

  1. computed 基本用法
    const computedBehavior = require('miniprogram-computed').behavior
    Component({
      behaviors: [computedBehavior],
      data: {
        a: 1,
        b: 1,
      },
      computed: {
        sum(data) {
          // 注意: computed 函数中不能访问 this ,只有 data 对象可供访问
          // 这个函数的返回值会被设置到 this.data.sum 字段中
          return data.a + data.b
        },
      },
      methods: {
        onTap() {
          this.setData({
            a: this.data.b,
            b: this.data.a + this.data.b,
          })
        },
      },
    })
    
  2. watch 基本用法
    const computedBehavior = require('miniprogram-computed').behavior
    
    Component({
      behaviors: [computedBehavior],
      data: {
        a: 1,
        b: 1,
        sum: 2,
      },
      watch: {
        'a, b': function (a, b) {
          this.setData({
            sum: a + b,
          })
        },
      },
      methods: {
        onTap() {
          this.setData({
            a: this.data.b,
            b: this.data.a + this.data.b,
          })
        },
      },
    })
    

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

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

相关文章

【nlp】3.2 Transformer论文复现:1. 输入部分(文本嵌入层和位置编码器)

Transformer论文复现:输入部分(文本嵌入层和位置编码器) 1 输入复现1.1 文本嵌入层1.1.1 文本嵌入层的作用1.1.2 文本嵌入层的代码实现1.1.3 文本嵌入层中的注意事项1.2 位置编码器1.2.1 位置编码器的作用1.2.2 位置编码器的代码实现1.2.3 位置编码器中的注意事项1 输入复现…

加班做报表被嘲低效!快用大数据分析工具

做数据分析报表很耗时间,因为不仅要解决多业务系统数据质量标准不一问题,还需要进行大量的公式计算、报表设计与制作。但那是以前,在大数据分析工具强势崛起的当下,这些工作都能交给大数据分析工具来做了。以前是花90%的时间做报表…

配电室智慧运维

配电室智慧运维是一种基于先进技术和智能化管理理念的配电室运维模式。依托电易云-智慧电力物联网,它结合云计算、物联网、大数据等技术,对配电室进行全方位的智能化管理和运维,旨在提高配电室的运行效率、安全性和可靠性。 配电室智慧运维的…

求臻医学六周年,我们的故事值得被记录

6载光阴求臻医学持续以科技创新推动产业升级在肿瘤精准诊疗领域持续深耕致力于为肿瘤患者生命续航每一位求臻人都是我们前进的力量也是我们不断创新的源泉我们不拘泥于一种声音以多元化的视角探索前行

发挥云计算潜力:Amazon Lightsail 与 Amazon EC2 的综述

文章作者:Libai 欢迎来到云计算世界,这里有无数的机会和无限的应用程序增长。 在当今的数字时代,企业可能会发现管理基础架构和扩展应用程序具有挑战性。 传统的本地解决方案需要大量的硬件、软件和维护前期投资。 要满足不断增长的需求&…

小型内衣裤洗衣机哪个牌子好?性价比小型洗衣机推荐

内衣内裤应该如何清洗才能实现在不伤衣的同时有能够洗干净呢?其实除了使用温水搭配手洗以外,还有一些清洗方式,那就是选择一台专门为内衣定制的内衣洗衣机。目前内衣洗衣机由于精致小巧,方便安装,方便使用,…

一元三次方程求解——浮点数二分

题目描述 思路 根与根之差的绝对值>1。可以得出距离为1的区间最多只有一个根若存在2个数x1和x2&#xff0c;且x1 < x2&#xff0c;f(x1) x f(x2) < 0&#xff0c;则(x1, x2)之间一定有一个根我们可以遍历每一个区间为1的范围&#xff0c;先判断左端点是否是根&#x…

python数据结构与算法-14_树与二叉树

树和二叉树 前面我们讲了两种使用分治和递归解决排序问题的归并排序和快速排序&#xff0c;堆排序先就此打住&#xff0c;因为涉及到树的概念&#xff0c;所以我们先来讲讲树。 讲完了树之后后面我们开始介绍一种有用的数据结构堆(heap)&#xff0c; 以及借助堆来实现的堆排序…

Hook+jsdom 解决cookie逆向

前言 记录下如何破cookie逆向 目标 目标网址:https://q.10jqka.com.cn/ 目标接口:http://q.10jqka.com.cn/index/index/board/all/field/zdf/order/desc/page/2/ajax/1/ 对抗:cookie反爬虫处理,关键字v,如图 解决步骤 1、JS中关键字查找 如上,我们找到了关键字 v,…

Webstorm 插件文件目录颜色分析——白蓝绿红黄灰

Webstorm 插件文件目录【白色、蓝色、绿色、红色、黄色、灰色】对应当前文件发生什么了&#xff0c;即文件夹当前状态。 WebStrom配置好git或SVN后文件颜色代表的含义&#xff1a; 白色&#xff1a;本地无修改内容 蓝色&#xff1a;文件内容有修改&#xff0c;暂未提交到git…

Re51:读论文 Language Models as Knowledge Bases?

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称&#xff1a;Language Models as Knowledge Bases? ArXiv网址&#xff1a;https://arxiv.org/abs/1909.01066 官方GitHub项目&#xff1a;https://github.com/facebookresearch/LAMA 本文是2019年…

深度学习之基于Tensorflow卷积神经网络鸟类目标识别检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 基于Tensorflow的卷积神经网络&#xff08;Convolutional Neural Networks&#xff0c;CNN&#xff09;在鸟类目标识…

淡入淡出transition: right 1s

transition: right 1s; //重点直接改变right值 操作过快 这里用该方法实现1s内淡入淡出 达到效果目标

35的程序员被辞了可以自己接外包啊?为什么都那么悲观呢?

35的年纪&#xff0c;上有老下有小&#xff0c;即将步入中年危机&#xff0c;在这个节骨眼上被辞&#xff0c;能不悲观吗&#xff1f; 在这个年纪人们往往追求的是稳定的工作和生活&#xff0c;而进入一个自己不熟悉的行业并不是一个好的选择。 况且&#xff0c;你认为的外包…

【考研】数据结构(更新到循环链表)

声明&#xff1a;所有代码都可以运行&#xff0c;可以直接粘贴运行&#xff08;只有库函数没有声明&#xff09; 线性表的定义和基本操作 基本操作 定义 静态&#xff1a; #include<stdio.h> #include<stdlib.h>#define MaxSize 10//静态 typedef struct{int d…

【23真题】Top3!最高148分,数二英二!

今天分享的是23年西安交通大学815的信号与系统数字信号处理试题及解析。众所周知&#xff0c;Top3一共有10所&#xff0c;其中就包括了西安交大&#xff01; 本套试卷难度分析&#xff1a;平均分为117-128分&#xff0c;最高分为148分&#xff01;22年西安交大909/815的真题我…

一点DETR学习

DETR: 主要是为了学习query。 主要从两个方面&#xff1a;加偏好和缩短序列长度

rabbit MQ的延迟队列处理模型示例(基于SpringBoot延时插件实现)

rabbitMQ安装插件rabbitmq-delayed-message-exchange 交换机由此type 表示组件安装成功 生产者发送消息时设置延迟值 消息在交换机滞纳至指定延迟后&#xff0c;进入队列&#xff0c;被消费者消费。 组件注解类&#xff1a; package com.esint.configs;import org.springfra…

vue3的单组件的编写(三)【响应式 API 之 toRef 与 toRefs】

响应式 API 之 toRef 与 toRefs 前面讲了 ref 和 reactive 这两种响应式API &#xff0c;为了方便开发者使用&#xff0c;vue3 还出了两个用来 reactive 转换为 ref 的API&#xff0c;分别是 toRef 和 toRefs 。 &#x1f308;什么是toRef 与 toRefs 这两个API看拼写能猜到&…

深度学习之基于Pytorch照片图像转漫画风格网络系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 以下是一个基本的设计介绍&#xff1a; 数据准备&#xff1a;收集足够的真实照片和漫画图像&#xff0c;用于训练模…