微信小程序计算属性与监听器：miniprogram-computed

• 小程序框架没有提供计算属性相关的 api ，但是官方为开发者提供了拓展工具库 miniprogram-computed。

• 该工具库提供了两个功能：

  1. 计算属性 computed
  2. 监听器 watch

一、安装 miniprogram-computed

1. 在项目的根目录下，使用如下命令，将快速在根目录下初始化生成一个 package.json 文件

   npm init -y
   

2. 安装 miniprogram-computed

   npm install miniprogram-computed
   

3. 然后 在 微信开发者工具 的左上角 点击 》工具》 构建 npm，构建成功后，将会在项目根目录下生成 miniprogram_npm 文件夹，可以在 miniprogram_npm 文件夹中看见构建的结果
   

二、计算属性 computed

• 如果需要在组件中使用计算属性功能，需要 miniprogram-computed 库中导入 ComponentWithComputed 方法

• 在使用时：需要将 Component 方法替换成 ComponentWithComputed 方法，原本组件配置项也需要写到该方法中。在替换以后，就可以新增 computed 以及 watch 配置项。

  注意事项：

  ​ 1.computed 函数中不能访问 this ，但是提供了形参，代表 data 对象

  ​ 2.计算属性函数的返回值会被设置到 this.data.sum 字段中

1. 在项目的根目录下的 components 文件夹中（没有该文件夹的需要自己创建）新建 custom02 文件夹，并在该文件夹中创建 custom02组件（在文件夹上点击鼠标右键，选择 新建 component）

2. 找到项目根目录下的 app.json 文件，增加如下代码，将 custom02组件注册为 全局组件

   {
     // ...其他配置项
     
     "usingComponents": {
       "custom02": "./components/custom02/custom02"
     }
   }
   

3. 在 pages/index.wxml 中使用 custom02 组件

   <custom02 />
   

4. 修改 components/custom02/custom02.js 文件， Component 方法替换成 ComponentWithComputed 方法

   import {
     ComponentWithComputed
   } from 'miniprogram-computed'
   
   ComponentWithComputed({
     data: {
       a: 1,
       b: 2
     },
     // 计算属性
     computed: {
       total(data) {
         // 不能使用 this 获取数据
         console.log(this); // undefined
         return data.a + data.b
       }
     },
     methods: {}
   })
   

5. 修改 components/custom02/custom02.wxml 文件

   <view>{{a}} + {{b}} = {{total}}</view>
   

三、监听器 watch

• 在使用时：需要将 Component 方法替换成 ComponentWithComputed 方法，原本组件配置项也需要写到该方法中，在替换以后，就可以新增 computed 以及 watch 配置项。

1. 在项目的根目录下的 components 文件夹中（没有该文件夹的需要自己创建）新建 custom03 文件夹，并在该文件夹中创建 custom03组件（在文件夹上点击鼠标右键，选择 新建 component）

2. 找到项目根目录下的 app.json 文件，增加如下代码，将 custom03组件注册为 全局组件

   {
     // ...其他配置项
     
     "usingComponents": {
       "custom03": "./components/custom03/custom03"
     }
   }
   

3. 在 pages/index.wxml 中使用 custom03 组件

   <custom03 />
   

4. 修改 components/custom03/custom03.js 文件， Component 方法替换成 ComponentWithComputed 方法

   import {
     ComponentWithComputed
   } from 'miniprogram-computed'
   
   ComponentWithComputed({
     data: {
       a: 1,
       b: 2
     },
     watch: {
       // key: 需要监听的数据
       // value: 回调函数，参数时改变之后的数据
       // a: function (newVal) {
       //   console.log(`a更新之后的数据：` + newVal);
       // },
       // b: function (newVal) {
       //   console.log(`b更新之后的数据：` + newVal);
       // }
   
       // 监听多个数据
       "a,b": function (a, b) {
         console.log(`a更新之后的数据：` + a);
         console.log(`b更新之后的数据：` + b);
       }
     },
     methods: {
       updateData() {
         this.setData({
           a: this.data.a + 1,
           b: this.data.b + 1
         })
       }
     }
   })
   

5. 修改 components/custom03/custom03.wxml 文件

   <view>a: {{a}}</view>
   <view>b: {{b}}</view>
   <button type="primary" bind:tap="updateData">更新数据</button>