【Vue.js】算出プロパティとフィルターついでに監視プロパティについて解説

Web

例えばVue.jsでデータを加工する方法はいくつかあります。 メソッドを使う手もありますが、基本的には算出プロパティフィルターを使います。

またデータを監視し、更新された場合に処理を実行するような監視プロパティが用意されています。

これらを扱えるようになるとVue.jsでできることがさらに広がっていきます。

算出プロパティ

算出プロパティは、データプロパティの値を使って新たなデータを作り出すことができる、というのが私の解釈です。 算出プロパティはcomputedオプションによって次のように定義することができます。

<div id="app">
  <p>{{doubleVal}}</p>
  <input v-model="val">
</div>
const app = new Vue({
  el: '#app',
  data: {
    val: 0
  },
  computed: {
    doubleVal() {
      return this.val * 2;
    }
  }
})

上例ではvalを倍にするdoubleValを定義しており、valの値の変化と共にdoubleValの値も変化します。 算出プロパティはデータプロパティと同じくthis.doubleValのように参照することができます。

しかし、this.doubleVal = 2のように値を設定することはこのままではできません。

getter と setter

算出プロパティにはgetterとsetterを定義することができます。 先程のような定義方法の場合はgetterのみ定義されていることになります。

getterとsetterは次のように定義します。

<div id="app">
  <p>{{val}}</p>
  <input v-model="doubleVal">
</div>
const app = new Vue({
  el: '#app',
  data: {
    val: 0
  },
  computed: {
    doubleVal: {
      get() {
        return this.val * 2;
      },
      set(val) {
        this.val = val / 2;
      }
    }
  }
})

setterにより参照元のデータを更新することで、あたかも算出プロパティも更新されているようにみせることができます。

メソッドとの違いは?

算出プロパティはあくまでプロパティであり、メソッドはあくまでメソッドです。 getterとsetterの時点で違いは明白ですが、強いて言えば算出プロパティはメソッドのように引数はないですし、用途も決められています。 あとメソッドは呼出と共に処理を実行しますが、算出プロパティは結果をキャッシュしているため参照元のデータが更新されるまでは処理が実行されません

フィルター

フィルターはデータフォーマットを目的に使用され、filtersオプションとして次のように定義することができます。

const app = new Vue({
  el: '#app',
  data: {
    amount: 1000000
  },
  filters: {
    comma(val) {
      return val.toLocaleString();
    },
    yenmark(val) {
      return `\xA5100${val}`;
    }
  }
})

フィルターを使用するには適用するデータに対し、パイプ( | )で繋げていきます。 複数指定も可能で、指定した順番(左から)に適用されます。

<div id="app">
  {{amount | comma | yenmark}}
</div>

メソッドでもデータフォーマットは可能ですが、こちらのほうがシンプルに記載することができます。

グローバル定義

フィルターはオプションオブジェクトとして定義するほかに以下のようにグローバルに定義することができます。

Vue.filter('comma', val => val.toLocaleString())

指定方法は先程と変わりありません。

監視プロパティ

監視プロパティは特定のデータを監視し、そのデータの値が更新されたタイミングで処理を実行します。 watchオプションとして次のように定義します。

const app = new Vue({
  el: '#app',
  data: {
    number: 1,
    isMultipleOfThree: false
  },
  watch: {
    number() {
      this.isMultipleOfThree = this.number % 3 === 0;
    }
  }
})

監視するデータ、今回の場合numberに対してnumber()という監視メソッドを定義します。

上例では、numberの値が変更されるとともに3の倍数であるかを判定し、その結果をisMultipleOfThreeに設定しています。

算出プロパティとの使い分け

先程の例は、算出プロパティを使うと次のように変換することができます。

const app = new Vue({
  el: '#app',
  data: {
    number: 1,
  },
  computed {
    isMultipleOfThree() {
      return this.number % 3 === 0;
    }
  }
})

このようなデータ変換については算出プロパティを使用したほうが、シンプルでわかりやすくなります。

上述したように、算出プロパティはあくまで参照値を元に値を変えているだけで、変更を検知できるわけではありません。 例えば値が変わった場合にAlertを表示するといったことを実装する場合は、監視プロパティを使用します。

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました