【Vue.js】基礎的なVue.jsのオプションオブジェクトまとめ

はじめに

この記事では、Vue.jsのオプションオブジェクトに関してまとめました。

今回は基礎的なところであるVue.jsのオプションに関して簡単に分かりやすくご紹介しますので
学びたての方や、これから勉強していきたいという方に参考にして頂けたら幸いです。

目次

1. Vue.jsのオプションの種類
2. data
3. methods
4. computed
5. watch
6. まとめ

1.Vue.jsのオプションの種類

単にVue.jsにあるオプションと言っても様々な種類が存在します！
もちろん私も全く使ったとこのないものもいっぱいあります。

いずれ種類に分けてまとめたものを記事にしていきたいと思いますが
今回はその中でも自分が最初にvue.jsに着手してよくわからなかった点を下記で紹介します。

data

書式

data:(){
	return{
		プロパティ名: 値,
	}
}

dataとは！？

インスタンスに値を指定して、どんなデータがあるかを定義するオプション

vueにおいて、このdataオプションの値を変更したり加工したりしてアプリケーションを構成していくのが基本的な流れです！

したがってdataオプションはVueにおいて必須。

値には、文字列や数値、オブジェクトや配列など様々な形式で指定することができます。

data() {
    return {
      // 文字列
      fruit: 'apple',
      // 数値
      price: 100,
      // オブジェクト
      fruits: {
        fruit: 'banana',
        price: 200,
      },
      // 配列
      allFruits: [
        {
          fruit: 'apple',
          price: 100 
        },
        {
          fruit: 'banana',
          price: 200
        },
        {
          fruit: 'orange',
          price: 300
        },
      ]
    }
  }

methods

書式

methods:{
	メソッド名:function(引数){
		処理内容
	}
}

methodsとは！？

インスタンスの中にある関数を定義するオプション

よく使う例としては、v-onディレクティブ等で、クリックされた時や変更があった時にmethodsに書いた関数が発火するというような感じ。

使い方は一般的な関数と同様

ただ私が勉強した時にわからなかったところはcomputedとの違いです！

methodsもcomputedも同じような事ができてしまうのが分かりにくい原因なのですが大きな違いがありました！

それはmethodsはキャッシュされずcomputedはキャッシュされるということ!

キャッシュされずにできる、モーダルやアラートの表示、ページ遷移などはmethodsに入れるのがいいです。

逆に、結果をキャッシュされた方が良いケース、例えばデータの計算や処理といったリアクティブなデータはcomputedに入れた方がいいです。

computed　「算出プロパティ」

書式

computed:{
	算出プロパティ名: fanction(){

	return ......
 }
}

computed　「算出プロパティ」とは！？

データの計算や変換を行うためのプロパティ

主にデータの変換や計算などに使用する事が多い。

データが変わると自動的に再計算されて計算された結果はキャッシュされます。

methodsは呼び出される度に計算されてしまうので、同じ結果が出なくなるかもしれません！

また、computedを使用する上でreturn文を必ず使用する必要があります。

<template>
  <div>
    <p>数値: {{ number }}</p>
    <p>2倍の数値: {{ doubleNumber }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 5
    };
  },
  computed: {
    doubleNumber: function() {
      return this.number * 2; // 正しく値を返しています
    }
  }
};
</script>

return文がないとちゃんと機能しなくなる可能性があるので注意しましょう！

watch 「監視プロパティ」

書式

data() {
  return {
    監視プロパティ
  };
},
watch: {
   監視プロパティ: function(newValue, oldValue) {
      データが変更されたときに行いたいアクション
   }
}

watch 「監視プロパティ」とは！？

データの変更を監視して、変更があった場合にアクションを実行するプロパティ

watchは文字通り、データを監視してます！

コードをみた方が理解できると思うので下記がwatchの基本的な使い方です。

<template>
  <div>
    <p>数値: {{ number }}</p>
    <p>監視した数値: {{ watchedNumber }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 5,
      watchedNumber: 0
    };
  },
  watch: {
    number: function(newValue, oldValue) {
      this.watchedNumber = newValue; // 数値が変わるたびに監視された数値も更新
    }
  }
};
</script>

number:5の数値に変更があったらwatchオプションが働いて
watchedNumberの数値を更新してくれるという仕組みです。

また、watchは非同期処理・Ajaxなどに使用できるので、computedとの組み合わせでもっと複雑で便利な機能を作ることも可能です！

watchは便利なオプションですが、常に監視しているというのもあり、書き過ぎると重たくなってしまう場合があります。多用はあまりせずmethodsとcomputedをうまく使いながら快適なページ作りを目指しましょう。

まとめ

今回はVue.jsのオプションオブジェクトの基本的なものをまとめました。

バリバリvueで開発をしている人にとっては当たり前なところかもしれませんが、
自分が最初に勉強してつまずいた点をまとめました。

また今後もVue.jsのみならずバックエンドの事に関してもまとめてみたいと思います。

ご拝読頂きありがとうございました。