微信小程序使用computed

在微信小程序的开发中，状态管理（State Management）是至关重要的一环。为了更高效地进行数据计算和响应式更新，开发者们往往借鉴前端框架中的优秀特性。然而，微信小程序官方并没有自带Vue.js中的computed计算属性功能，这在一定程度上给开发者带来了困扰。幸运的是，我们可以借助miniprogram-computed这个第三方库来实现这一功能。

本文将详细介绍如何在微信小程序中引入并使用miniprogram-computed库来实现computed计算属性，以及在使用过程中需要注意的事项。

一、准备工作

1、 安装依赖

在终端中按顺序输入以下命令来安装miniprogram-computed库：

npm install --save miniprogram-computed

2、 构建npm

点击微信开发者工具上方工具栏的“工具”->“构建npm”，构建完成后点击确定。

二、引入并使用computed计算属性

1、 引入 computedBehavior

在需要使用computed计算属性的页面的JS文件中，最开始处加入以下代码：

import computedBehavior from 'miniprogram-computed'

2、 在Pages中加入 behaviors

在该页面的Pages对象中加入behaviors字段，并将computedBehavior添加进去：

Pages({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
  },
  computed: {
    sum(data) {
      // 注意：computed 函数中不能访问 this，只有 data 对象可供访问
      // 这个函数的返回值会被设置到 this.data.sum 字段中
      return data.a + data.b;
    },
  },
  methods: {
    onTap() {
      this.setData({
        a: this.data.b,
        b: this.data.a + this.data.b,
      });
    },
  },
});

组件中的写法类似，请参照修改。

三、注意事项

1、 确保使用 this.setData

computed计算属性的值会根据对应的值发生改变而改变，但前提是必须通过this.setData方法来改变这些值。如果直接修改data对象中的属性，而不通过this.setData方法，那么computed中的计算属性是不会发生任何改变的。

2、 computed 函数中不能访问 this

在computed函数中，不能访问this对象，只能访问传入的data对象。这是因为在计算属性计算时，this的上下文并不指向当前页面实例。

3、 构建npm

每次修改package.json或安装新的npm包后，都需要重新构建npm，以确保更改生效。

四、示例

以下是一个完整的示例页面代码，展示了如何使用miniprogram-computed来实现computed计算属性：

// index.js
import computedBehavior from 'miniprogram-computed'

Pages({
  behaviors: [computedBehavior],
  data: {
    a: 1,
    b: 1,
  },
  computed: {
    sum(data) {
      return data.a + data.b;
    },
  },
  methods: {
    onTap() {
      this.setData({
        a: this.data.b,
        b: this.data.a + this.data.b,
      });
    },
  },
});

// index.wxml
<view>
  <text>a: {{a}}</text>
  <text>b: {{b}}</text>
  <text>sum: {{sum}}</text>
  <button bindtap="onTap">点击改变值</button>
</view>

在这个示例中，当用户点击按钮时，a和b的值会改变，同时computed计算属性sum的值也会自动更新。

通过本文的介绍，你应该已经学会了如何在微信小程序中引入并使用miniprogram-computed库来实现computed计算属性。希望这能为你的小程序开发带来便利。

本文地址：https://www.tides.cn/p_mina-computed