微信小程序中的计算属性库-miniprogram-computed

miniprogram-computed 是一个用于微信小程序的扩展库，它提供了计算属性（computed）和监听器（watch）的功能，类似于 Vue.js 中的计算属性和监听器。以下是使用 miniprogram-computed 的详细步骤：

安装与构建

1. 在项目根目录下运行以下命令安装 miniprogram-computed：

   npm install --save miniprogram-computed
   

2. 在微信开发者工具中构建 npm：
   • 打开开发者工具。
   • 点击“工具”菜单。
   • 选择“构建 npm”。

使用计算属性 computed

1. 引入 computedBehavior：
   在需要使用 computed 的页面或组件的 JS 文件中，引入 computedBehavior：

   import { behavior as computedBehavior } from 'miniprogram-computed';
   

2. 在页面或组件中使用 computed：
   • 在页面或组件的配置对象中添加 behaviors 属性，并将 computedBehavior 添加进去。
   • 定义 computed 属性，其值是一个对象，对象的键是计算属性的名称，值是一个函数，该函数的参数是组件的 data 对象。

   Page({
     behaviors: [computedBehavior],
     data: {
       a: 1,
       b: 2,
     },
     computed: {
       sum(data) {
         // 注意：computed 函数中不能访问 this，只有 data 对象可供访问
         return data.a + data.b;
       },
     },
     methods: {
       onTap() {
         this.setData({
           a: this.data.b,
           b: this.data.a + this.data.b,
         });
       },
     },
   });
   

3. 在 WXML 文件中使用计算属性：

   <view>A = {{a}}</view>
   

B = {{b}}
SUM = {{sum}}
点击更新

### 使用监听器 `watch`
1. **定义 `watch`**：
   在页面或组件的配置对象中定义 `watch` 属性，其值是一个对象，对象的键是要监听的数据字段，值是一个函数，该函数会在数据变化时被调用。
   ```javascript
   watch: {
     a(newVal, oldVal) {
       console.log(`a changed from ${oldVal} to ${newVal}`);
     },
     b(newVal, oldVal) {
       console.log(`b changed from ${oldVal} to ${newVal}`);
     },
   },

2. 监听多个字段：
   可以同时监听多个字段，字段名用逗号分隔。

   watch: {
     'a,b': function(a, b) {
       console.log(`a=${a}, b=${b}`);
     },
   },
   

注意事项

• computed 函数中不能访问 this，但可以通过参数访问 data 对象。
• 计算属性具有缓存特性，只有当依赖的数据发生变化时，才会重新计算。
• 如果需要在组件中使用，需要将 Component 替换为 ComponentWithComputed。

通过以上步骤，你可以在微信小程序中使用 miniprogram-computed 来实现计算属性和监听器功能，从而更高效地管理数据和响应数据变化。