计算属性和数据监听

小程序模板语言中不允许使用函数表达式，这也就意味着我们无法使用函数动态计算模板。例如：

  1. <view id="example">
  2.   {{ message.join('、') }}
  3. </view>

虽然无法直接使用函数表达式，但是我们可以通过小程序独有的 WXS计算属性和数据监听 - 图1 语法来实现类似的效果。例如：

  1. <wxs module="m1">
  2. var join = function(array) {
  3.   return array.join('、');
  4. }
  6. module.exports.join = join;
  7. </wxs>
  9. <view> {{m1.join(message)}} </view>

虽然 wxs 可以满足需求，但是编写起来比较麻烦，比如仅支持 ES5 的语法，特定的 API。此时我们可以就使用计算属性来优化我们的代码。

开始使用

由于小程序的单向数据流已经能满足绝大部分场景，所以在 @wxa/core 中并没有内置关于数据监听的逻辑，所以再开始使用之前需要安装 @wxa/watch.

  1. npm i -S @wxa/watch

接着只需要在 app.wxa 中注册组件即可：

  1. import {wxa} from '@wxa/core';
  2. import wxaWatch from '@wxa/watch';
  4. wxa.use(wxaWatch);

此时使用 wxa 注册的所有页面和组件将自动获得数据监听和计算属性两个新的能力。

计算属性

我们只需要在实例或者类声明中加上 computed 对象，插件将在页面和组件实例化的过程中自动的设置对应的 computed 数据。需要注意的是，由于小程序环境对 Proxy 的支持还不够好，所以现阶段使用的还是 Object.defineProperty 使用的数据监听，故需要响应式更新的数据应提前在 data 中声明。

  1. <template>
  2.     <view id="example">
  3.         <view>Original message: "{{ message }}"</view>
  4.         <view>Computed message: "{{ computedMessage }}"</view>
  5.     </view>
  6. </template>
  7. <script>
  8. export default class {
  9.     data =  {
  10.         message: 'Hello'
  11.     }
  13.     computed = {
  14.         computedMessage() {
  15.             return this.data.message + ' World'
  16.         }
  17.     }
  18. }
  19. </script>

使用起来非常方便。

数据监听

在开发表单的过程中，我们经常需要联动判断表单状态，例如下面的简单示例：

  1. <template>
  2.     <input value="{{formData.name}}" />
  3.     <input value="{{formData.email}}" />
  4.     <button disabled="{{!isValid}}">确认提交</button> 
  5. </template>
  6. <script>
  7. import {Page} from '@wxa/core';
  9. @Page
  10. export default class Index {
  11.     data = {
  12.         formData: {
  13.             name: '',
  14.             email: ''
  15.         }
  16.     }
  17.     watch = {
  18.         formData(newValue) {
  19.             // 判断表单数据是否为空
  20.             let isValid = !!Object.keys(newValue).find((key)=>!newValue[key]);
  21.             this.setData({isValid})
  22.         }
  23.     }
  24. }
  25. </script>

当表单填写完毕之后，提交按钮高亮提交，很简单不是吗~