0Pricing
Frontend Academy · レッスン

Options API：data・methods・computed

リアクティブなデータを定義し、テンプレートから呼び出すメソッドを書き、自動更新される派生値には computed プロパティを使います。

「Options API：data・methods・computed」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

VueのOptions APIとは

Options APIでは、オプションの種類ごとにコンポーネントのロジックを整理します。data（リアクティブな状態）、methods（関数）、computed（派生状態）、watch（副作用）、ライフサイクルフックを使用します。それぞれを名前付きのオブジェクトプロパティに記述します。

dataオプション

リアクティブなプロパティのオブジェクトを返します。data()で宣言したすべてのプロパティはリアクティブです。Vueがそれらを監視し、変更されるとテンプレートを再レンダリングします。

export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0,
      user: null as User | null,
    };
  }
}

methodsオプション

テンプレートや他のmethodsから呼び出せる関数です。methods内のthisはコンポーネントインスタンスを参照し、dataやcomputedプロパティにアクセスできます。

export default {
  data() { return { count: 0 }; },
  methods: {
    increment() {
      this.count++; // 'this' is the component instance
    },
    decrement() {
      this.count--;
    }
  }
}

computedオプション

computedプロパティはリアクティブなデータから値を導出します。キャッシュされるため、依存関係が変化したときにのみ再計算されます。不要な再計算を避けるため、派生値にはmethodsではなくcomputedを使用します。

export default {
  data() {
    return { items: [], tax: 0.2 };
  },
  computed: {
    itemCount() { return this.items.length; },
    subtotal() { return this.items.reduce((sum, i) => sum + i.price, 0); },
    total() { return this.subtotal * (1 + this.tax); } // uses another computed
  }
}

書き込み可能なcomputedプロパティ

computedにはgetとsetを設定して書き込み可能にできます。v-modelとの双方向バインディングに便利です。

computed: {
  fullName: {
    get() { return `${this.firstName} ${this.lastName}`; },
    set(value: string) {
      [this.firstName, this.lastName] = value.split(' ');
    }
  }
}

watchオプション

ウォッチャーは、リアクティブなプロパティが変更されたときに副作用を実行します。データの変更をきっかけに実行する非同期処理（検索語が変わったときのデータ取得など）に使用します。

watch: {
  searchTerm(newVal: string) {
    this.fetchResults(newVal);
  },
  // Deep watch for objects:
  settings: {
    handler(val) { this.saveSettings(val); },
    deep: true
  }
}

Options APIのライフサイクルフック

ライフサイクルフックをメソッドとして宣言します。created、mounted、updated、unmountedがあります。createdはDOMの準備が整う前に実行されます。mountedはコンポーネントがDOMに追加された後に実行されます。

export default {
  mounted() {
    this.fetchData(); // runs after component is in the DOM
    this.timer = setInterval(this.tick, 1000);
  },
  unmounted() {
    clearInterval(this.timer); // cleanup
  }
}

テンプレートからのアクセス: $refs

テンプレート要素にref属性を追加し、methods内でthis.$refs.nameを介してDOM要素または子コンポーネントにアクセスします。マウント後に利用できます。

<input ref="emailInput" type="email">

// In mounted():
this.$refs.emailInput.focus();

MixinsとComposition API

Options APIには、コンポーネント間でロジックを共有するためのmixinsがあります。Composition APIでは、mixinsの大部分がcomposablesに置き換えられています。mixinsは理解しにくく、名前空間の衝突も起こるためです。新しいコードではComposition APIを優先してください。

Options APIとComposition API

Options APIは小規模から中規模のコンポーネントに適しており、初心者にも学びやすい方法です。Composition API（setup() /