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

小程序框架没有提供计算属性相关的 api ，但是官方为开发者提供了拓展工具库 miniprogram-computed。
该工具库提供了两个功能：
1. 计算属性 computed
2. 监听器 watch

一、安装 miniprogram-computed

在项目的根目录下，使用如下命令，将快速在根目录下初始化生成一个 package.json 文件
powershell 复制代码
```
npm init -y
```
安装 miniprogram-computed
powershell 复制代码
```
npm install miniprogram-computed
```
然后在 微信开发者工具 的左上角点击》工具》构建 npm，构建成功后，将会在项目根目录下生成 miniprogram_npm 文件夹，可以在 miniprogram_npm 文件夹中看见构建的结果

二、计算属性 computed

如果需要在组件中使用计算属性功能，需要 miniprogram-computed 库中导入 ComponentWithComputed 方法
在使用时：需要将 Component 方法替换成 ComponentWithComputed 方法 ，原本组件配置项也需要写到该方法中。在替换以后，就可以新增 computed 以及 watch 配置项。

注意事项：

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

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

在项目的根目录下的 components 文件夹中（没有该文件夹的需要自己创建）新建 custom02 文件夹，并在该文件夹中创建 custom02组件（在文件夹上点击鼠标右键，选择 新建 component）
找到项目根目录下的 app.json 文件，增加如下代码，将 custom02组件注册为全局组件
json 复制代码
```
{
  // ...其他配置项
  
  "usingComponents": {
    "custom02": "./components/custom02/custom02"
  }
}
```
在 pages/index.wxml 中使用 custom02 组件
html 复制代码
```
<custom02 />
```

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

javascript 复制代码

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: {}
})

修改 components/custom02/custom02.wxml 文件
html 复制代码
```
<view>{{a}} + {{b}} = {{total}}</view>
```

三、监听器 watch

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

在项目的根目录下的 components 文件夹中（没有该文件夹的需要自己创建）新建 custom03 文件夹，并在该文件夹中创建 custom03组件（在文件夹上点击鼠标右键，选择 新建 component）
找到项目根目录下的 app.json 文件，增加如下代码，将 custom03组件注册为全局组件
json 复制代码
```
{
  // ...其他配置项
  
  "usingComponents": {
    "custom03": "./components/custom03/custom03"
  }
}
```
在 pages/index.wxml 中使用 custom03 组件
html 复制代码
```
<custom03 />
```

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

javascript 复制代码

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

修改 components/custom03/custom03.wxml 文件

html 复制代码

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