微信小程序：computed行为扩展的使用指南

小程序computed行为扩展的使用指南

在小程序开发中，我们经常需要根据已有的数据动态计算新的数据。为了简化这一过程，miniprogram-computed 提供了计算属性（computed）和监听器（watch）的功能。以下是如何在你的小程序项目中使用这个库的详细指南。

一、安装与构建

首先，你需要在你的小程序项目中安装miniprogram-computed。打开终端，进入你的项目目录，然后运行以下命令：

npm install --save miniprogram-computed

安装完成后，你需要在开发者工具中构建npm。操作步骤如下：

1. 打开开发者工具。
2. 点击“工具”菜单。
3. 选择“构建npm”。

构建完成后，你就可以开始使用computed和watch功能了。

二、computed基本用法

computed允许你定义依赖于组件数据的计算属性。这些属性会根据依赖的数据自动更新。以下是如何使用computed的基本示例：

const computedBehavior = require('miniprogram-computed').behavior;

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

在WXML中，你可以直接使用sum作为数据绑定：

<view>SUM = {{sum}}</view>

三、watch基本用法

watch允许你监听一个或多个数据字段的变化，并在变化时执行特定的操作。以下是如何使用watch的基本示例：

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

Component({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
    sum: 2,
  },
  watch: {
    'a, b': function (a, b) {
      this.setData({
        sum: a + b,
      });
    },
  },
});

在WXML中，同样可以直接使用sum作为数据绑定：

<view>SUM = {{sum}}</view>

四、常见问题说明

使用computed还是watch？

从性能角度来看，watch通常比computed更优，因为它只在监听的字段真正发生变化时才触发。而computed则提供了更简洁的代码结构。此外，computed字段只能依赖于data和其他computed字段，不能访问this。如果你需要访问this，那么必须使用watch。

watch与小程序基础库的observers有什么区别？

• observers无论字段是否真正改变都会被触发，而watch只在字段值改变时触发，并且带有参数。
• watch可以使用**通配符来监听对象下的子字段变化，类似于小程序基础库的observers。

通过使用miniprogram-computed，你可以在小程序中更加方便地管理和响应数据变化，从而提高开发效率和应用性能。希望这份指南能帮助你更好地理解和使用computed和watch功能。