前言

在小程序开发中，改变数据更新视图用的是Page.prototype.setData方法，遇到一些复杂数据逻辑判断时，代码会写的很繁琐，这个时候就想尝试在小程序内实现像Vue.js那样的computed自动计算功能。之前有研究过Vue.js的依赖收集逻辑，就照葫芦画瓢捣鼓了一下。而数据变化后的视图更新操作则是通过小程序内部的Page.prototype.setData原型函数来完成。

构建打包

使用rollup进行构建

1. 安装依赖，npm install
2. 运行打包命令，npm run build，在dist目录下生成打包文件

使用例子

将打包后的wxComputed.min.js文件放在lib目录中，在需要用到的页面中引入

<!--index.wxml-->
<view class="container">
    <view>firstName</view>
    <input bindinput="inputEvent" data-type="firstName" value="{{firstName}}" />
    <view>lastName</view>
    <input bindinput="inputEvent" data-type="lastName" value="{{lastName}}" />
    <view>fullName: {{ fullName }}</view>
</view>
复制代码

// index.js
import initComputed from '../../lib/wxComputed.min.js'

Page({
  data: {
    lastName: 'aa',
    firstName: 'bb',
  },
  inputEvent(e) {
    const {type} = e.currentTarget.dataset
    this.setData({
        [type]: e.detail.value,
    })
  },
  // 这里放入computed属性
  computed: {
    // 这是一个函数，返回值为此计算属性的值
    fullName() {
        return this.data.lastName + '-' + this.data.firstName
    },
  },
  onLoad() {
    // 在onLoad生命周期中执行computed属性初始化
    initComputed(this)
  },
})
复制代码

---

项目地址：github.com/leegsen7/wx…
有什么不足之处请大家不吝赐教，一起学习。