Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wechat-miniprogram/computed
小程序自定义组件 computed / watch 扩展
https://github.com/wechat-miniprogram/computed
Last synced: 6 days ago
JSON representation
小程序自定义组件 computed / watch 扩展
- Host: GitHub
- URL: https://github.com/wechat-miniprogram/computed
- Owner: wechat-miniprogram
- License: mit
- Created: 2018-08-20T06:12:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-05-28T09:51:42.000Z (7 months ago)
- Last Synced: 2024-05-29T01:17:15.134Z (7 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.39 MB
- Stars: 632
- Watchers: 11
- Forks: 60
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# computed
小程序自定义组件扩展 behavior，计算属性 `computed` 和监听器 `watch` 的实现。在 data 或者 properties 改变时，会重新计算 `computed` 字段并触发 `watch` 监听器。
> 此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅[官方 npm 文档](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html)。
注意： 4.0.0 大版本变更了最基本的接口名，从低版本升级到 4.0.0 以上时请注意 [#60](https://github.com/wechat-miniprogram/computed/issues/60) 的问题。
## 使用方法
### 方式一 代码片段
需要小程序基础库版本 >= 2.11.0 的环境。
可以直接体验一下这个代码片段，它包含了基本用法示例：[https://developers.weixin.qq.com/s/4KYn6TmJ7osP](https://developers.weixin.qq.com/s/4KYn6TmJ7osP)
体验该代码片段前，需要先安装并构建相对应的 npm 包。
```shell
npm install --save miniprogram-computed
```
### 方式二 本地构建
将本仓库 clone 到本地，进入根目录安装 npm 依赖。
```shell
npm install
```
安装完成后执行
```shell
npm run dev // 构建 dev 版本
```
构建完毕后，根目录下的 `demo` 即为小程序代码根目录，可以将此 demo 导入开发者工具中进行体验。
### computed 基本用法
```js
// component.js
const computedBehavior = require('miniprogram-computed').behavior
const behaviorTest = require('./behavior-test') // 引入自定义 behavior
Component({
behaviors: [behaviorTest, computedBehavior],
data: {
a: 1,
b: 1,
},
computed: {
sum(data) {
// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
// 这个函数的返回值会被设置到 this.data.sum 字段中
return data.a + data.b + data.c // data.c 为自定义 behavior 数据段
},
},
methods: {
onTap() {
this.setData({
a: this.data.b,
b: this.data.a + this.data.b,
})
},
},
})
```
```js
//behavior-test.js
module.exports = Behavior({
data: {
c: 2,
},
})
```
```xml
A = {{a}}
B = {{b}}
SUM = {{sum}}
click
```
### watch 基本用法
```js
const computedBehavior = require('miniprogram-computed').behavior
Component({
behaviors: [computedBehavior],
data: {
a: 1,
b: 1,
sum: 2,
},
watch: {
'a, b': function (a, b) {
this.setData({
sum: a + b,
})
},
},
methods: {
onTap() {
this.setData({
a: this.data.b,
b: this.data.a + this.data.b,
})
},
},
})
```
```xml
A = {{a}}
B = {{b}}
SUM = {{sum}}
click
```
### glass-easel Chaining API 支持
使用 glass-easel Chaining API 时，可以用更友好的 `computed` `watch` 函数。
```js
import { computed, watch } from 'miniprogram-computed'
Component()
.data(() => ({
a: 1,
b: 2,
}))
.init((ctx) => {
const data = computed(ctx, {
c: (data) => data.a + data.b,
d: (data) => data.a * 2,
}, {
e: (data) => data.c + data.d,
})
watch(ctx, 'a, b', (a: number, b: number) => {
// ...
})
})
.register()
```
### 非 chaining API 的 TypeScript 支持
由于通过 behavior 的方式引入不能获得类型支持, 因此为了获得类型的支持, 可以使用一个辅助组件构造器：
```ts
import { ComponentWithComputed } from 'miniprogram-computed'
ComponentWithComputed({
data: {
a: 1,
b: 1,
sum: 2,
},
watch: {
'a, b': function (a, b) {
this.setData({
sum: a + b,
})
},
},
computed: {
sum(data) {
// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问
// 这个函数的返回值会被设置到 this.data.sum 字段中
return data.a + data.b + data.sum // data.c 为自定义 behavior 数据段
},
},
})
```
当使用该构造器的时候, 编译器可以给 `computed` 和 `watch` 提供自动提示和类型支持。
**注意: 当使用该构造器的时候, 无需手动加入 `computedBehavior` , 该构造器会自动引入该 behavior 。**
（类似地，也有 `BehaviorWithComputed` 构造器对应于 `Bahavior` 。）
**关于 TS 兼容问题**
若在小程序中用 `TypeScript` 进行开发并使用到了 `Component` 构造器。这时定义 `computed` 或 `watch` 字段会出现类型报错。
针对此问题，推荐使用 `ComponentWithComputed` 构造器代替 `Component` 构造器。
## 常见问题说明
### 我应该使用 computed 还是 watch ？
从原理上说， `watch` 的性能比 `computed` 更好；但 `computed` 的用法更简洁干净。
此外， `computed` 字段状态只能依赖于 `data` 和其他 `computed` 字段，不能访问 `this` 。如果不可避免要访问 `this` ，则必须使用 `watch` 代替。
### watch 和小程序基础库本身的 observers 有什么区别？
- 无论字段是否真的改变， `observers` 都会被触发，而 `watch` 只在字段值改变了的时候触发，并且触发时带有参数。
### 关于 \*\* 通配符
在 `watch` 字段上可以使用 `**` 通配符，它能够监听这个字段下的子字段的变化（类似于小程序基础库本身的 observers ）。
```js
const computedBehavior = require('miniprogram-computed').behavior
Component({
behaviors: [computedBehavior],
data: {
obj: {
a: 1,
b: 2,
},
},
watch: {
'obj.**': function (obj) {
this.setData({
sum: obj.a + obj.b,
})
},
},
methods: {
onTap() {
this.setData({
'obj.a': 10,
})
},
},
})
```
除此以外：
- 对于没有使用 `**` 通配符的字段，在 `watch` 检查值是否发生变化时，只会进行粗略的浅比较（使用 `===` ）；
- 对于使用了 `**` 通配符的字段，则会进行深比较，来尝试精确检测对象是否真的发生了变化，这要求对象字段不能包含循环（类似于 `JSON.stringify` ）。