文章目录

1. 1. 自定义组件
   1. 1.1. behaviors
   2. 1.2. computed 实现
2. 2. Page 的超集
   1. 2.1. hack 实现 Page computed 能力
   2. 2.2. 使用 Component 构造器构造页面
   3. 2.3. 参考
3. 3. 结束语

小程序的出身，基于安全和管控的考虑，使用了双线程的设计，同时对于 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定义段。

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

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));
      })
    });
  }
});

可以这么写：

{
  "usingComponents": {}
}

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啦。

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
更欢迎来被删的前端游乐场边撸猫边学前端噢