微信小程序中使用计算属性

在小程序开发中,它的基本原理和vue是大同小异,但是有的时候就是因为这小异造成很多不必要的麻烦.

在小程序开发中,改变数据更新视图用的是Page.prototype.setData方法，遇到一些复杂数据逻辑判断时，代码会写的很繁琐，这个时候就让我想起了vue中的计算属性了,当然小程序自定义组件扩展 behavior，计算属性 computed 和监听器 watch 的实现。在 data 或者 properties 改变时，会重新计算 computed 字段并触发 watch 监听器。

安装具体的使用步骤如下：

1:初始化npm, 命令行进入到小程序项目根目录，执行初始化npm

npm init

2:完成后，在项目根目录中创建目录node_modules文件夹

3:cd到node_modules目录下，执行安装computed

npm install --save miniprogram-computed

4:在小程序开发者工具里构建npm

5:在使用的js文件中引入(官方文档如下)

//引入computed
const computedBehavior = require('miniprogram-computed')

Component({
    
  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,
      })
    }
  }
})

6:我自己又简单的测试了一下

<!--index.wxml-->
<view class="container">
  <view>
    <view catchtap="change" >{{a}} <!-- 点击事件改变a的值来测试sum-->
    <view>{{b}}</view>
    <view>{{c}}</view>
  </view>
  <view>
      {{sum}}
  </view>
</view>

//index.js
//获取应用实例
const app = getApp()
const computedBehavior = require('miniprogram-computed')
Component({
  behaviors: [computedBehavior],
  data: {
   a:1,
   b:2,
   c:3
  },
    methods:{
      change(){
        this.setData({
            a:this.data.a+1
        })
          //点击一次sum的值随着a的改变而改变
          console.log(this.data.sum)// 7 --> 8 -->9 
      }
        
    },
  computed: {
    sum(data) {
      return data.a+data.b+data.c
    }
  },
})