44
55> 此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅[ 官方 npm 文档] ( https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html ) 。
66
7- 注意: 4.0.0 大版本变更了最基本的接口名,升级到 4.0.0 以上时请注意 [ #60 ] ( https://github.com/wechat-miniprogram/computed/issues/60 ) 的问题。旧版文档可以参考对应版本的 git tag 中的 README ,如 [ v3.1.1 ] ( https://github.com/wechat-miniprogram/computed/tree/v3.1.1 ) tag 。
7+ 注意: 4.0.0 大版本变更了最基本的接口名,从低版本升级到 4.0.0 以上时请注意 [ #60 ] ( https://github.com/wechat-miniprogram/computed/issues/60 ) 的问题。
88
99## 使用方法
1010
1111### 方式一 代码片段
1212
13- 需要小程序基础库版本 >= 2.6.1 的环境。
13+ 需要小程序基础库版本 >= 2.11.0 的环境。
1414
1515可以直接体验一下这个代码片段,它包含了基本用法示例:[ https://developers.weixin.qq.com/s/4KYn6TmJ7osP ] ( https://developers.weixin.qq.com/s/4KYn6TmJ7osP )
1616
@@ -120,7 +120,33 @@ Component({
120120<button bindtap =" onTap" >click</button >
121121```
122122
123- ### TypeScript 支持
123+ ### glass-easel Chaining API 支持
124+
125+ 使用 glass-easel Chaining API 时,可以用更友好的 ` computed ` ` watch ` 函数。
126+
127+ ``` js
128+ import { computed , watch } from ' miniprogram-computed'
129+
130+ Component ()
131+ .data (() => ({
132+ a: 1 ,
133+ b: 2 ,
134+ }))
135+ .init ((ctx ) => {
136+ const data = computed (ctx, {
137+ c : (data ) => data .a + data .b ,
138+ d : (data ) => data .a * 2 ,
139+ }, {
140+ e : (data ) => data .c + data .d ,
141+ })
142+ watch (ctx, ' a, b' , (a : number , b : number ) => {
143+ // ...
144+ })
145+ })
146+ .register ()
147+ ```
148+
149+ ### 非 chaining API 的 TypeScript 支持
124150
125151由于通过 behavior 的方式引入不能获得类型支持, 因此为了获得类型的支持, 可以使用一个辅助组件构造器:
126152
@@ -162,65 +188,6 @@ ComponentWithComputed({
162188
163189针对此问题,推荐使用 ` ComponentWithComputed ` 构造器代替 ` Component ` 构造器。
164190
165- ** 关于类型声明**
166-
167- 在 ` 4.0.5 ` 版本之前,并未提供相关的 ` .d.ts ` 类型声明。
168-
169- 强烈建议将 ` miniprogram-computed ` npm 包依赖升级至 ` ^4.0.5 ` 已获取完整的类型能力。
170-
171- ### glass-easel Chaining API 支持
172-
173- 使用 glass-easel Chaining API 时,可以用更友好的 ` computed ` ` watch ` 函数。
174-
175- ``` js
176- import { computed , watch } from ' miniprogram-computed'
177-
178- Component ()
179- .data (() => ({
180- a: 1 ,
181- b: 2 ,
182- }))
183- .init ((ctx ) => {
184- const data = computed (ctx, {
185- c : (data ) => data .a + data .b ,
186- })
187- watch (ctx, ' a, b' , (a : number , b : number ) => {
188- // ...
189- })
190- })
191- .register ()
192- ```
193-
194- ## ^4.0.0 与 ^1.0.0、 ^2.0.0、 ^3.0.0 版本的差异
195-
196- ### ^4.0.0 版本
197-
198- - 变更了最基本的接口。
199-
200- - 新增简单的 TypeScript 支持。
201-
202- ### ^3.0.0 版本
203-
204- - 支持 mobx-miniprogram 扩展库引入的数据段。
205-
206- - 对自定义 behavior 数据段使用 computed 时,支持在初始化视图中进行数据渲染。
207-
208- - 基于 proxy 更新了 computed 数据追踪的实现方式,computed 依赖的数据路径追踪初始化操作,延后到组件的 created 阶段 。
209-
210- ### ^2.0.0 版本
211-
212- 基于小程序基础库 2.6.1 开始支持的 observers 定义段实现,具有较好的性能。
213-
214- 以下是版本之间主要区别的比较。
215-
216- | 项目 | ^1.0.0 | ^2.0.0 | ^3.0.0 和 ^4.0.0 |
217- | ----------------------------------------------- | --------------- | ------------- | ---------------- |
218- | 支持的基础库最低版本 | 2.2.3 | 2.6.1 | 2.6.1 |
219- | 支持 ` watch ` 定义段 | 否 | 是 | 是 |
220- | 性能 | 相对较差 | 相对较好 | 相对较好 |
221- | 支持 ` mobx-miniprogram ` 扩展库 | 不支持 | 不支持 | 支持 |
222- | 支持自定义 ` behavior ` 数据字段 / 初始化视图渲染 | 不支持 / 不支持 | 支持 / 不支持 | 支持 / 支持 |
223-
224191## 常见问题说明
225192
226193### 我应该使用 computed 还是 watch ?
@@ -235,7 +202,7 @@ Component()
235202
236203### 关于 \*\* 通配符
237204
238- 在 ` watch ` 字段上可以使用 ` ** ` 通配符,是它能够监听这个字段下的子字段的变化 (类似于小程序基础库本身的 observers )。
205+ 在 ` watch ` 字段上可以使用 ` ** ` 通配符,它能够监听这个字段下的子字段的变化 (类似于小程序基础库本身的 observers )。
239206
240207``` js
241208const computedBehavior = require (' miniprogram-computed' ).behavior
@@ -269,7 +236,3 @@ Component({
269236
270237- 对于没有使用 ` ** ` 通配符的字段,在 ` watch ` 检查值是否发生变化时,只会进行粗略的浅比较(使用 ` === ` );
271238- 对于使用了 ` ** ` 通配符的字段,则会进行深比较,来尝试精确检测对象是否真的发生了变化,这要求对象字段不能包含循环(类似于 ` JSON.stringify ` )。
272-
273- ### 关于低版本兼容
274-
275- 对于 IOS ` 9.3 ` 以下的版本,由于无法原生支持 ` Proxy ` ,这里会使用 ` proxy-polyfill ` 去代替。
0 commit comments