Vue3 Tutorial8 算出プロパティ

Vue3の復習 tutorial-step8

Vue.js

Vue.js - The Progressive JavaScript Framework

ja.vuejs.org

• Vue.js

  • Computed Property 算出プロパティ

    • メソッドの戻り値をキャッシュして、依存する値が変わったときに再計算される
    • ReactでいうところのuseMemoのようなもの

    export default {
      data() {
        return {
          newTodo: '',
          hideCompleted: false,
          todos: [
            { id: 1, text: 'Learn HTML', done: true },
            { id: 2, text: 'Learn JavaScript', done: true },
            { id: 3, text: 'Learn Vue', done: false }
          ]
        }
      },
      computed: {
        filteredTodos() {
          return this.hideCompleted
            ? this.todos.filter((t) => !t.done)
            : this.todos
        }
      },
      methods: {
        addTodo() {
          this.todos.push({ id: this.todos.length + 1, text: this.newTodo, done: false });
          this.newTodo = '';
        },
        removeTodo(todo) {
          this.todos = this.todos.filter((t) => t !== todo);
        }
      }
    }

    • チュートリアルのコードを見て、exportしているのがVueコンポーネントのオブジェクトであるということに今更気付いた
    • はじめdataの部分について「なぜオブジェクトキーのように見えないか」と疑問に思ったが、これはdataオプションが関数として定義されるため
      • Vueでは、dataはオブジェクトではなく、関数として定義される必要がある。
        • これは、各コンポーネントのインスタンスごとに異なるデータを持つことを可能にするためであるらしい
      • そのため、オブジェクトリテラルのように見えないが、実際には関数が定義され、戻り値としてオブジェクトを返している
    • 一方で、methodsやcomputedはオブジェクトのプロパティとして定義されている
      • methodsには、コンポーネントで使用する関数をプロパティとして定義し、イベントハンドリングや状態の変更を行う
      • computedもオブジェクトのプロパティであり、依存するデータが変更された場合にのみ再計算され、結果がキャッシュされる