当前位置: 首页 > news >正文

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

微信小程序实现类似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').behaviorComponent({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.lryc.cn/news/242842.html

相关文章:

  • [JVM] 美团二面,说一下JVM数据区域
  • 【React】useReducer
  • leetcode刷题详解二
  • 利用opencv/暗通道方法检测图像是否有雾-利用opencv/暗通道方法对深度学习目标检测算法结果进行二次识别提高准确率
  • Linux | 重定向 | 文件概念 | 查看文件 | 查看时间 | 查找文件 | zip
  • 【广州华锐互动】利用VR体验环保低碳生活能带来哪些教育意义?
  • python爬虫中 HTTP 到 HTTPS 的自动转换
  • 卷积神经网络(CNN)识别验证码
  • 使用 PyODPS 采集神策事件数据
  • 罗技M590鼠标usb优联连接不上
  • 天池 机器学习算法(一): 基于逻辑回归的分类预测
  • 45岁后,3部位“越干净”,往往身体越健康,占一个也要恭喜!
  • Windows安装Hadoop运行环境
  • 软件测试 | MySQL 主键约束详解:保障数据完整性与性能优化
  • 深入了解Linux中的scp命令及高级用法
  • moviepy 视频剪切,拼接,音频处理
  • ubuntu搭建phpmyadmin+wordpress
  • linux网络之网络层与数据链路层
  • python数学建模之Numpy、Pandas学习与应用介绍
  • LiveVIS视图库1400-如何切换数据库?默认使用的数据库是什么?如何切换到Mysql/MariaDB?
  • 【2023.11.24】Mybatis基本连接语法学习➹
  • 如何防止网络被入侵?
  • 【Linux】常见指令及周边知识(一)
  • 【Docker】从零开始:6.配置镜像加速器
  • The Bridge:从临床数据到临床应用(预测模型总结)
  • [极客大挑战 2019]Secret File1
  • 如何评估一个论坛或峰会值不值得参加?
  • 04_使用API_日期和时间
  • 手动实现 git 的 git diff 功能
  • RabbitMQ之MQ的可靠性