小程序的出身，基于安全和管控的考虑，使用了双线程的设计，同时对于 DOM 操作、动态创建 DOM 这些都隔离了。在写代码的时候，模版语法不支持函数计算等，computed 的方法就显得十分重要了。

自定义组件

小程序的自定义组件涉及功能很多，这篇只针对computed展开来讲。

computed比较适合较复杂逻辑的计算，同时在小程序无法在模板里使用methods这样的场景下，计算属性的需求就更强烈了。

behaviors

自定义组件中，提供了behaviors的使用和定义。

从官方文档我们能看到：

behaviors是用于组件间代码共享的特性，类似于一些编程语言中的“mixins”或“traits”。
每个behavior可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个behavior。

简单来说，我们能通过behaviors来重构Component的能力。

如果说，我们能“混入”Component，其实基本很多能力都能实现啦。其实我们自己封装一层的MyComponent也能达到一定的效果，但是这样的拓展性会变得很糟。

通过behaviors的方式，每个组件可以按需引入自己需要的behavior啦。

computed 实现

我们来梳理下这里的逻辑，我们需要一个computed能力，需要处理的主要是：setData的时候，根据computed来计算哪些数据需要处理。

所以我们要做的是：

1. 记下来需要computed的变量。
2. 在每次setData之前，看看是否包含到需要computed的变量，匹配到了就进行computed处理。
3. 使用处理后的数据，进行setData。

官方已经提供了计算属性实现的behavior，大家也可以尽情翻看实现的源码，和使用这种拓展能力。

Page 的超集

hack 实现 Page computed 能力

想必大家都会有疑惑，Component里支持behaviors，但是Page依然写起来很不方便呀。虽然所有的Page最终也能通过Component来实现，但是这样是否需要多包装一层呢？

答案是不用。

使用 Component 构造器构造页面

Component是Page的超集，因此可以使用Component构造器构造页面。

同样的，我们来看看官方文档：

事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用Component构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应json文件中包含usingComponents定义段。

也就是说，我们这样的页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Page({
  data: {
    logs: []
  },
  onLoad(query) {
    // 如访问页面`/pages/index/index?paramA=123&paramB=xyz`，如果声明有属性(`properties`)`paramA`或`paramB`，则它们会被赋值为`123`或`xyz`
    query.paramA // 页面参数 paramA 的值
    query.paramA // 页面参数 paramB 的值
    this.setData({
      logs: (wx.getStorageSync("logs") || []).map((log: number) => {
        return formatTime(new Date(log));
      })
    });
  }
});

可以这么写：

1
2
3

{
  "usingComponents": {}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Component({
  // 组件的属性可以用于接收页面的参数
  properties: {
    paramA: Number,
    paramB: String,
  },
  data: {
    logs: []
  },
  methods: {
    onLoad() {
      // 如访问页面`/pages/index/index?paramA=123&paramB=xyz`，如果声明有属性(`properties`)`paramA`或`paramB`，则它们会被赋值为`123`或`xyz`
      this.data.paramA // 页面参数 paramA 的值
      this.data.paramB // 页面参数 paramB 的值
      this.setData({
        logs: (wx.getStorageSync("logs") || []).map((log: number) => {
          return formatTime(new Date(log));
        })
      });
    }
  }
});

这样，我们就能愉快地使用behaviors啦。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

const computedBehavior = require("miniprogram-computed");
Component({
  behaviors: [computedBehavior],
  data: {
    logs: []
  },
  computed: {
    logsAfterComputed() {
      // 计算属性同样挂在 data 上，每当进行 setData 的时候会重新计算
      // 比如此字段可以通过 this.data.b 获取到
      return this.data.logs.map(x => {
        return {
          log: x,
          logAfterCompute: x + "logAfterCompute"
        };
      });
    }
  },
  methods: {
    onLoad() {
      this.setData({
        logs: (wx.getStorageSync("logs") || []).map((log: number) => {
          return formatTime(new Date(log));
        })
      });
    }
  }
});

使用Component构造器构造页面，需要注意：

1. 组件的属性可以用于接收页面的参数，如访问页面/pages/index/index?paramA=123&paramB=xyz，如果声明有属性(properties)paramA或paramB，则它们会被赋值为123或xyz。（可参考官方代码示例）
2. 页面的生命周期方法（即on开头的方法，如上面的onLoad），应写在methods定义段中。

这样，你就能愉快地在代码里面使用computed计算属性啦~

更多的，也可以参考本人的wxapp-typescript-demo中的log page，后续也会持续更新方便好用的能力 demo。

参考

• Component构造器
• behaviors

结束语

小程序提供的能力其实挺多的，但是很多时候由于文档很多、查找不方便，会导致我们有些很好用的功能没有发现，然后苦逼地一边吐槽一边悲壮地撸代码。
官方提供的目前只有computed，大家可以看看，是不是还可以做watch之类的能力呢？

查看Github有更多内容噢：https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

如果你想要关注日常生活中的我，欢迎关注“牧羊的猪”公众号噢