详解小程序如何引入使用computed计算属性
发布于 3 年前 作者 baijie 2449 次浏览 来自 分享

对于使用过前端框架的很多人来写小程序，会因为小程序官方并没自带computed计算属性而造成了一定程度的困扰，为了解决这个困扰，下面我将介绍如何引入官方推荐的自定义组件扩展computed

PS：第三点以及文尾的内容非常重要！！一定要注意！！！

进入你的小程序后(小程序根目录需要命名为全英文，中文在后续安装中也会有介绍怎么办)，进入微信开发者工具，打开下方的终端，并点击+号新建终端  
![](https://image.wxopen.club/content_bc4ce769-50a8-11ec-8ed2-001a7dda7111.png)

然后检查左边目录，如果根目录是如下图分为cloudfunctions(云函数目录)和miniprogram(主要代码部分)，那么需在终端输入`` cd miniprogram ``先进入miniprogram目录，再进行后续导入包  
![](https://image.wxopen.club/content_bc62bba4-50a8-11ec-a4b7-001a7dda7111.png)

如果左边目录是如下图的形式那么不需要输入cd miniprogram

  1. 然后在终端输入按顺序输入以下三条指令：
    （1）npm init -y(如果你的小程序根目录不是全英文，那么输入npm init，然后输入任意一个英文名称，一直回车即可)
    （2）npm install --production
    （3）npm install --save miniprogram-computed
    （4）点击微信开发者工具上方工具栏的 工具 -> 构建npm -> 构建完成点击确定即可

  2. 然后在需要使用计算属性computed页面的JS部分
    先在JS部分最开始加入以下代码
    const computedBehavior = require("miniprogram-computed").behavior;
    然后在Pages中加入
    behaviors: [computedBehavior]

如下图：

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

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

温馨提示：需要通过this.setData改变值，computed的计算属性的值才会因为对应的值发生改变而改变
例如上述代码，onTap()方法中如果改变a和b的值是如下：

a = this.data.b;
b = this.data.a+ this.data.b;

而不是

this.setData({
        a: this.data.b,
        b: this.data.a + this.data.b,
});

那么computed中的sum属性是不会发生任何改变的。

道理很简单，对已有的 setData 进行二次封装，在每次 setData 的时候计算出 computed 里各字段的值，然后设到 data 中，以达到计算属性的效果，不用setData对a和b进行更新，那么计算属性sum便接收不到此更改。

文章到此结束啦，觉得有帮助的小伙伴可以点个赞~

如果按照上述步骤仍无法正常使用computed的欢迎在评论区提出

回到顶部