computed

计算属性是一个函数/带setter和getter的对象，利用组合其它数据的方式返回一个新的数据，你可以像绑定普通数据一样在模板中绑定计算属性。

类型：{ [key: string]: Function | { get: Function, set: Function } } 适用于【页面 | 组件】

示例：

  1. <template>
  2.   <view>
  3.     <text>Original message: "{{ message }}"</text>
  4.     <text>Computed reversed message: "{{ reversedMessage }}"</text>
  5.   </view>
  6. </template>
  8. <script>
  9. import {createComponent} from '@mpxjs/core'
  10. createComponent({
  11.   data: {
  12.     message: 'Hello',
  13.     num: 5
  14.   },
  15.   computed: {
  16.     // 计算属性
  17.     reversedMessage: function () {
  18.       return this.message.split('').reverse().join('')
  19.     },
  20.     // 读取和设置
  21.     computeNum: {
  22.       get: function () {
  23.         return this.num - 1
  24.       },
  25.       set: function (val) {
  26.         this.num = val + 1
  27.       }
  28.     }
  29.   },
  30.   ready() {
  31.     // 改变message后reversedMessage会同步更新，模板也会重新渲染
  32.     this.message = 'Hello world!'
  33.     this.computeNum // 4
  34.     this.computeNum = 10 
  35.     this.num // 11
  36.   }
  37. })
  38. </script>