Vueで、今まで全然気がつかなかったというか使ってなかったというかこんな使い方ができたのね😅

アプリ共通の関数ってやっぱ必ずありますよね。
Vueの基盤オブジェクトを作っておいてextendするような実装を今までしてたけど、ありモノをそのまま使いたいとかもあるじゃないですか。momentとかunderscoreとか。
今までは、結局、Vueの基盤オブジェクトを作ってそこにラップした関数を定義してたわけですよ。

仮に以下のような使い回ししたい関数があった場合。

$myfunctions = {
  parsehoge: function(val) { /* ゴニョゴニョ */ },
  formathoge: function(val) { /* ゴニョゴニョ */ },  
}

今までは...

$vuebase = {
  methods: {
    parsehoge: function(val) { return $myfunctions.parsehoge(val); },
    formathoge: function(val) { return $myfunctions.formathoge(val); },  
  },
}


var app = new Vue(_.extend($vuebase, {
  el: '#app',
  data: { 
    message: 'Hello world!' 
  }
  methods: {
   /**/
  },

}));

と、こんな感じで、使いたい関数をいちいちラップしたわけですね。じゃないとView側で

 :value="parsehoge(data.name)"

みたいにバインドする際にフォーマットしたりするのが書けないので。もしくは、Vue正規のアプローチならグローバルなフィルターを作っとくとかになりますね。これも結局ラップしたコードを書くことになりますわな。

で、全く深く考えず(なんでかしらず、多分、久しぶりにVue書いたので間違ったんだよね😅)データ部にファンクションを定義したら

var app = new Vue({
  el: '#app',
  data: { 
    parsehoge: $myfunctions.parsehoge, // ここ
    formathoge: $myfunctions.formathoge, // ここ
    message: 'Hello world!' 
  }
  methods: {
   /**/
  },

});
 :value="parsehoge(data.name)"

と、普通に使えたというお話。ユーティリティー系の出来合いの関数を使いたいときはごっつう便利じゃ!