微信小程序實現computed計算屬性

上篇博客講了小程序實現watch機制，這篇介紹如何實現computed計算屬性。

小程序的計算屬性和Vue.js的不太一樣——小程序在.wxml（不是.js）文件中定義（其實是借用wxs標籤實現的）：

<view class="container">
  <wxs module="fn">
    module.exports = {
      reverse: function(str) {
        return str.reverse()
      },
      arr2Str: function(arr) {
        return arr.join('、')
      }
    }
  </wxs>
  <text>{{ fn.reverse('大海愛奔跑') }}</text>
  <text>{{ fn.arr2Str(['Vue', 'Node', '小程序', 'JS', 'CSS']) }}</text>
</view>

Tips

計算屬性中很可能要用到data，親測下來似乎引用不到，即不能通過this.data.xxx訪問到，可以換種方式實現——在調用的地方，往函數裏傳遞需要使用的data字段，比如：

<wxs module="fn">
  module.exports = {
    getText: function(keyword, length) {
      // 這裏不能使用`${xxx}`格式，否則報錯
      return '關鍵詞' + keyword + '匹配到 ' + length + ' 個結果'
    }
  }
</wxs>

<!-- 這裏傳入keyword和names.length，上面的getText則可以使用 -->
<view class="key">{{ fn.getText(keyword, names.length) }}</view>