评论

让小程序页面和自定义组件支持 computed 和 watch 数据监听器

习惯于 VUE 或其他一些框架的同学们可能会经常使用它们的 computed 和 watch 。我们做了一个 npm 模块来提供 computed 和 watch 功能。

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

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

先来个 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

看起来 computedwatch 具有类似的功能,应该使用哪个呢?

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

想知道原理?

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

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

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

最后一次编辑于  07-24  
点赞 6
收藏
评论

3 个评论

  • Mo
    Mo
    07-26

    为什么就不能让page也支持observers,把page写成component很怪啊。

    07-26
    赞同 1
    回复 10
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      07-26
      因为 Page({ ... }) 里面是可以有自由字段的,加定义段的话怕和已有小程序的代码冲突。
      07-26
      回复
    • Mo
      Mo
      07-29
      。。。那以后如果又添加了一些新特性,总归是需要把一些函数名作为内部保留
      07-29
      回复
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      07-29回复Mo
      所以 Component 构造器的第一级都是有限的字段名,比如 data methods 。
      07-29
      回复
    • Mo
      Mo
      07-29回复小程序技术专员-LastLeaf
      所以为什么page不采取component构造器写发,自定义函数都必须写在methods下。第一级字段的都是内部自保留的函数
      07-29
      回复
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      07-30回复Mo
      历史原因了……
      07-30
      1
      回复
    查看更多(5)
  • 陈式坚
    陈式坚
    07-25

    我现在已经回到手动时代了,即不用watch和computed,全部是手动去调用函数更新。

    因为不太想过度依赖小程序框架的特性,迁移成本高且开发思维模式也不同


    也曾经通过setter getter去实现。但是setData是异步这件事情导致很混乱,也不用了

    07-25
    赞同 1
    回复 1
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      07-25
      setData 对于 this.data 的改变是同步的。用 getter / setter 的问题在于 this.data 是框架在维护的,很难处理。你可以参考一下这里 computed 的实现方式。
      07-25
      2
      回复
  • 云天团
    云天团
    11-27

    请问一下,computed 可以依赖 computed 里面的数据吗?

    会不会影响性能呢?

    11-27
    赞同
    回复 2
    • 云天团
      云天团
      11-27
      跑了一下是支持的,感谢官方适配
      11-27
      回复
    • 小程序技术专员-LastLeaf
      小程序技术专员-LastLeaf
      11-27
      v2 版本以上可以支持。 computed 不可避免会对性能有一定影响,不过现在看起来影响比较小。 watch 不会有什么影响。
      11-27
      回复