computed

小程序自定义组件扩展 behavior,计算属性 computed 和监听器 watch 的实现。在 data 或者 properties 改变时,会重新计算 computed 字段并触发 watch 监听器。

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

使用方法

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

你可以直接体验一下这个代码片段,它包含了基本用法示例:https://developers.weixin.qq.com/s/gXK31mmZ73dd

安装

  1. npm install --save miniprogram-computed

computed 基本用法

  1. const computedBehavior = require('miniprogram-computed')
  2. Component({
  3. behaviors: [computedBehavior],
  4. data: {
  5. a: 1,
  6. b: 1,
  7. },
  8. computed: {
  9. sum(data) {
  10. // 注意: computed 函数中不能访问 this ,只有 data 对象可供访问
  11. // 这个函数的返回值会被设置到 this.data.sum 字段中
  12. return data.a + data.b
  13. },
  14. },
  15. methods: {
  16. onTap() {
  17. this.setData({
  18. a: this.data.b,
  19. b: this.data.a + this.data.b,
  20. })
  21. }
  22. }
  23. })
  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')
  2. Component({
  3. behaviors: [computedBehavior],
  4. data: {
  5. a: 1,
  6. b: 1,
  7. sum: 2,
  8. },
  9. watch: {
  10. 'a, b': function(a, b) {
  11. this.setData({
  12. sum: a + b
  13. })
  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>

^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 字段上可以使用 ** 通配符,是它能够监听这个字段下的子字段的变化(类似于小程序基础库本身的 observers)。示例代码片段

  1. const computedBehavior = require('miniprogram-computed')
  2. Component({
  3. behaviors: [computedBehavior],
  4. data: {
  5. obj: {
  6. a: 1,
  7. b: 2,
  8. }
  9. },
  10. watch: {
  11. 'obj.**': function(obj) {
  12. this.setData({
  13. sum: obj.a + obj.b
  14. })
  15. },
  16. },
  17. methods: {
  18. onTap() {
  19. this.setData({
  20. 'obj.a': 10
  21. })
  22. }
  23. }
  24. })

除此以外:

  • 对于没有使用 ** 通配符的字段,在 watch 检查值是否发生变化时,只会进行粗略的浅比较(使用 === );
  • 对于使用了 ** 通配符的字段,则会进行深比较,来尝试精确检测对象是否真的发生了变化,这要求对象字段不能包含循环(类似于 JSON.stringify )。