习惯于 VUE 或其他一些框架的同学们可能会经常使用它们的 computed 和 watch 。

小程序框架本身并没有提供这个功能，但我们基于现有的特性，做了一个 npm 模块来提供 computed 和 watch 功能。

先来个 GitHub 链接：https://github.com/wechat-miniprogram/computed

如何使用？

安装 npm 模块

npm install --save miniprogram-computed

示例代码

const computedBehavior = require('miniprogram-computed')

Component({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
  },
  computed: {
    sum(data) {
      return data.a + data.b
    },
  },
})

const computedBehavior = require('miniprogram-computed')

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

怎么在页面中使用？

其实上面的示例不仅在自定义组件中可以使用，在页面中也是可以的——因为小程序的页面也可用 Component 构造器来创建！

如果你已经有一个这样的页面：

Page({
  data: {
    a: 1,
    b: 1,
  },
  onLoad: function() { /* ... */ },
  myMethod1: function() { /* ... */ },
  myMethod2: function() { /* ... */ },
})

可以先把它改成：

Component({
  data: {
    a: 1,
    b: 1,
  },
  methods: {
    onLoad: function() { /* ... */ },
    myMethod1: function() { /* ... */ },
    myMethod2: function() { /* ... */ },
  },
})

然后就可以用了：

const computedBehavior = require('miniprogram-computed')

Component({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
  },
  computed: {
    sum(data) {
      return data.a + data.b
    },
  },
  methods: {
    onLoad: function() { /* ... */ },
    myMethod1: function() { /* ... */ },
    myMethod2: function() { /* ... */ },
  },
})

应该使用 computed 还是 watch ？

看起来 computed 和 watch 具有类似的功能，应该使用哪个呢？

一个简单的原则： computed 只有 data 可以访问，不能访问组件的 methods （但可以访问组件外的通用函数）。如果满足这个需要，使用 computed ，否则使用 watch 。

想知道原理？

computed 和 watch 主要基于两个自定义组件特性： 数据监听器 和 自定义组件扩展 。其中，数据监听器 observers 可以用来监听数据被 setData 操作。

• 对于 computed ，每次执行 computed 函数时，记录下有哪些 data 中的字段被依赖。如果下一次 setData 后这些字段被改变了，就重新执行这个 computed 函数。
• 对于 watch ，它和 observers 的区别不大。区别在于，如果一个 data 中的字段被设置但未被改变，普通的 observers 会触发，但 watch 不会。

如果遇到问题或者有好的建议，可以在 GitHub 提 issue 。