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

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

构建npm

  1. 创建包管理器

    进入小程序后,打开终端,点击顶部"视图" - "终端"

    新建终端

    使用 npm init -y初始化包管理器,生成一个package.json文件

  2. 安装 npm 包

    javascript 复制代码
    npm install --save miniprogram-computed
  3. 构建npm

    点击开发者工具中的菜单栏:工具 --> 构建 npm

使用

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

  1. computed 基本用法

    javascript 复制代码
    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 基本用法

    javascript 复制代码
    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,
          })
        },
      },
    })
相关推荐
枫,为落叶19 分钟前
【vue】导出excel
前端·vue.js·excel
晴殇i25 分钟前
一行生成绝对唯一 ID:别再依赖 Date.now() 了!
前端·javascript·vue.js
Stringzhua1 小时前
微信小程序快速入门【02】
微信小程序·小程序
想要狠赚笔的小燕1 小时前
老项目救星:Vue3/Vite/JS 项目渐进式引入「代码 + Commit」自动化规范全指南(多人协作)
前端·vue.js
枫,为落叶1 小时前
【vue】设置时间格式
前端·javascript·vue.js
赵庆明老师2 小时前
Uniapp微信小程序开发:全局变量的使用
微信小程序·小程序·uni-app
勇敢di牛牛2 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
Sheldon一蓑烟雨任平生2 小时前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
2501_915921433 小时前
iOS 应用加固与苹果软件混淆全解析 IPA 文件防反编译、混淆加密与无源码加固策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2401_885405513 小时前
定位守护童年,科技构筑安全屏障
科技·物联网·安全·小程序·宠物·web app·智能手表