computed

小程序自定义组件扩展 behavior，计算属性 computed 和监听器 watch 的实现。

此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档。

使用方法

需要小程序基础库版本 >= 2.6.1 的环境。

  • 安装 computed：
  1. npm install --save miniprogram-computed
  • 作为 behavior 引入。使用 computed ：
  1. const computedBehavior = require('miniprogram-computed')
  3. Component({
  4.   behaviors: [computedBehavior],
  5.   data: {
  6.     a: 1,
  7.     b: 1,
  8.   },
  9.   computed: {
  10.     sum(data) {
  11.       // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
  12.       // 这个函数的返回值会被设置到 this.data.sum 字段中
  13.       return data.a + data.b
  14.     },
  15.   },
  16.   methods: {
  17.     onTap() {
  18.       this.setData({
  19.         a: this.data.b,
  20.         b: this.data.a + this.data.b,
  21.       })
  22.     }
  23.   }
  24. })
  1. <view>A = {{a}}</view>
  2. <view>B = {{b}}</view>
  3. <view>SUM = {{sum}}</view>
  4. <button bindtap="onTap">click</button>

使用 watch ：

  1. const computedBehavior = require('miniprogram-computed')
  3. Component({
  4.   behaviors: [computedBehavior],
  5.   data: {
  6.     a: 1,
  7.     b: 1,
  8.     sum: 2,
  9.   },
  10.   watch: {
  11.     'a, b': function(a, b) {
  12.       this.setData({
  13.         sum: a + b
  14.       })
  15.     },
  16.   },
  17.   methods: {
  18.     onTap() {
  19.       this.setData({
  20.         a: this.data.b,
  21.         b: this.data.a + this.data.b,
  22.       })
  23.     }
  24.   }
  25. })
  1. <view>A = {{a}}</view>
  2. <view>B = {{b}}</view>
  3. <view>SUM = {{sum}}</view>
  4. <button bindtap="onTap">click</button>

Q & A

^1.0.0 与 ^2.0.0 版本差异

这个 behavior 的 ^1.0.0 版本和 ^2.0.0 版本有较大差异。 ^2.0.0 版本基于小程序基础库 2.6.1 开始支持的 observers 定义段实现，具有较好的性能。以下是版本之间主要区别的比较。

项目^1.0.0^2.0.0
支持的基础库最低版本2.2.32.6.1
支持 watch 定义段否是
性能相对较差相对较好

我应该使用 computed 还是 watch ？

从原理上说， watch 的性能比 computed 更好；但 computed 的用法更简洁干净。

此外， computed 字段状态只能依赖于 data 和其他 computed 字段，不能访问 this 。如果不可避免要访问 this ，则必须使用 watch 代替。

watch 和小程序基础库本身的 observers 有什么区别？

  • 无论字段是否真的改变， observers 都会被触发，而 watch 只在字段值改变了的时候触发，并且触发时带有参数。
  • 目前 watch 还不支持 ** 通配符。