▶_MiniApp Toolkit

miniprogram-computed

工具活跃维护

微信官方小程序计算属性与监听器扩展库。通过 behavior 注入为自定义组件提供 Vue 风格的 computed 和 watch 能力，data/properties 变化时自动重新计算并触发监听。原生支持 TypeScript（ComponentWithComputed）和 glass-easel Chaining API。

★ 698🕒 最近更新 2026-07
官网文档
计算属性watch微信小程序官方库TypeScriptglass-easel

特性

  • computed 计算属性（data/properties 变化时自动重新计算）
  • watch 监听器（多字段监听，支持新旧值对比）
  • behavior 注入模式（Component behaviors）
  • TypeScript 类型支持（ComponentWithComputed / BehaviorWithComputed）
  • glass-easel Chaining API 支持（computed() / watch() 函数）
  • 自定义 behavior 数据参与计算
  • npm 包 miniprogram-computed v8.0.0

详细文档

miniprogram-computed#

资源概述#

miniprogram-computed 是微信官方（wechat-miniprogram 组织）出品的小程序自定义组件扩展库，为原生小程序开发提供 Vue 风格的 computed（计算属性）和 watch（监听器）能力。它通过 behavior 注入方式工作——当 data 或 properties 发生变化时，自动重新计算 computed 字段并触发 watch 回调。

核心价值：弥补小程序原生开发缺少计算属性的短板，避免在 setData 后手动计算衍生数据，减少模板中的复杂表达式和重复逻辑。

关键数据：

  • GitHub：698 stars / 62 forks / 5 contributors / MIT License
  • npm 包：miniprogram-computed v8.0.0（最新）
  • 维护状态：官方团队维护，2026-04-01 最近提交
  • 组织：wechat-miniprogram（微信官方 GitHub 组织）
  • 基础库要求：>= 2.11.0

设计规范#

架构模式#

采用 Behavior 注入模式，与小程序自定义组件系统深度集成：

能力工作方式触发时机
computed纯函数，接收 data 对象，返回计算结果data / properties 变化时自动重算
watch回调函数，接收新值和旧值监听的字段变化时触发

两种 API 风格#

风格适用场景特点
Behavior 模式（传统）Component({}) 构造器通过 behaviors: [computedBehavior] 注入
Chaining API（推荐）glass-easel Component() 链式使用 computed() / watch() 函数，类型友好

审核规范#

本库为 npm 开发依赖，无需平台审核。使用时需确保小程序项目已开启 npm 构建（开发者工具 → 详情 → 本地设置 → 使用 npm 模块）。

开发指南#

快速上手#

code
npm install --save miniprogram-computed

构建 npm：微信开发者工具 → 工具 → 构建 npm

computed 基本用法

code
// component.js
const computedBehavior = require('miniprogram-computed').behavior

Component({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
  },
  computed: {
    sum(data) {
      // 注意：computed 函数中不能访问 this，只有 data 对象
      return data.a + data.b
    },
  },
  methods: {
    onTap() {
      this.setData({
        a: this.data.b,
        b: this.data.a + this.data.b,
      })
    },
  },
})
code
<!-- component.wxml -->
<view>A = {{a}}</view>
<view>B = {{b}}</view>
<view>SUM = {{sum}}</view>
<button bindtap="onTap">click</button>

watch 基本用法

code
const computedBehavior = require('miniprogram-computed').behavior

Component({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
    sum: 2,
  },
  watch: {
    'a, b': function (a, b, oldA, oldB) {
      this.setData({ sum: a + b })
    },
  },
  methods: {
    onTap() {
      this.setData({
        a: this.data.b,
        b: this.data.a + this.data.b,
      })
    },
  },
})

glass-easel Chaining API#

code
import { computed, watch } from 'miniprogram-computed'

Component()
  .data(() => ({
    a: 1,
    b: 2,
  }))
  .init((ctx) => {
    const data = computed(ctx, {
      c: (data) => data.a + data.b,
      d: (data) => data.a * 2,
    }, {
      // 支持依赖其他 computed 结果
      e: (data) => data.c + data.d,
    })
    watch(ctx, 'a, b', (a: number, b: number) => {
      console.log('a or b changed:', a, b)
    })
  })
  .register()

TypeScript 类型支持#

code
import { ComponentWithComputed } from 'miniprogram-computed'

ComponentWithComputed({
  data: {
    a: 1,
    b: 1,
  },
  computed: {
    sum(data) {
      return data.a + data.b  // 完整类型提示
    },
  },
  watch: {
    'a, b': function (a: number, b: number) {
      // 类型安全
    },
  },
})

常见陷阱#

  1. computed 中不能访问 this：computed 函数只接收 data 对象作为参数，不能通过 this 访问方法或 properties。需要 properties 数据时，确保它们在 data 中可见（properties 自动同步到 data）
  2. v4.0.0 破坏性变更：从 v3.x 升级到 v4.0.0+ 时接口名已变更，需参考 issue #60 进行迁移
  3. watch 多字段格式：watch 键名用逗号分隔多个字段（'a, b'），回调参数顺序与键名顺序一致
  4. npm 构建必须开启：未在开发者工具中执行「构建 npm」会导致 require 失败
  5. Chaining API 需 glass-easel：computed() / watch() 函数模式需要 glass-easel 运行时支持（基础库 v3.x+）
  6. 计算属性不可循环依赖：computed 字段之间不能互相依赖形成环，Chaining API 模式下可通过嵌套对象解决

生态资源#

配套库与工具#

库说明
miniprogram-simulate官方组件测试工具，可用于测试 computed/watch 行为
glass-easel微信新一代组件框架，Chaining API 的运行时基础
miniprogram-api-typingsTypeScript 类型定义，搭配使用获得最佳类型提示

适用场景#

  • 中大型原生小程序项目：组件逻辑复杂，衍生数据多
  • 表单场景：总价、校验状态等需要实时计算
  • 数据展示：列表过滤/排序结果缓存
  • 跨组件数据联动：父组件 properties 变化时子组件自动响应

与其他状态管理方案对比#

方案计算属性监听器TypeScript学习成本适用规模
miniprogram-computed✅✅ watch✅ 原生低小～中型
mobx-miniprogram-bindings✅（通过 MobX）✅（observe）✅中中～大型
westore❌❌❌低小～中型
原生 setData❌❌❌无任意

版本更新#

当前版本（核实日期：2026-07-22）#

  • npm 最新：miniprogram-computed v8.0.0
  • GitHub 最新提交：2026-04-01（v8.0.0 更新说明）
  • 主要变更：glass-easel Chaining API 支持（computed() / watch() 函数）、TypeScript 完整类型支持（ComponentWithComputed / BehaviorWithComputed）
  • 基础库要求：>= 2.11.0（Chaining API 需 v3.x+）
  • 维护状态：官方团队持续维护中

版本里程碑#

  • v8.x：glass-easel Chaining API、TypeScript 增强、依赖更新
  • v4.x：API 接口重构（破坏性变更，issue #60）
  • v3.x：早期稳定版本，兼容老版本基础库