微信小程序实现类似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,
          })
        },
      },
    })
相关推荐
努力成为包租婆2 小时前
微信小程序 van-dropdown-menu
微信·微信小程序·小程序
山海上的风3 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
thinkQuadratic4 小时前
微信小程序动态设置高度,添加动画等常用操作
微信小程序·小程序
中科三方5 小时前
APP和小程序需要注册域名吗?(国科云)
小程序·apache
jjw_zyfx5 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
幽络源小助理7 小时前
微信小程序文章管理系统开发实现
java·微信小程序·springboot
乌夷7 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
10年前端老司机8 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序
苹果酱05679 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计