Vue3 宣言的レンダリング

宣言的レンダリング（Declarative Rendering）とは、DOM を直接操作するのではなく、データによってビューの更新を駆動することを指します。

宣言的レンダリングにより、開発者はビューと DOM の更新方法を気にすることなく、ビジネスロジックに集中できます。

Vue3 の宣言的レンダリングはテンプレートベースのレンダリング方式であり、開発者は簡潔なテンプレート構文を使用してページの構造とデータバインディングの関係を記述でき、DOM を直接操作する必要はありません。

Vue3 の宣言的レンダリングは、テンプレート、ディレクティブ（v-if、v-for、v-bind など）、およびリアクティブデータを使用して、UI 更新プロセスを簡素化します。

Vue の宣言的レンダリングを使用すると、UI がどのように表示されるかを宣言するだけで、Vue がデータの変化に応じてビューを自動的に更新します。データを変更すると、ビューが自動的に応答します。

Vue3 はテンプレート構文（HTML に類似）を使用して UI を記述します。テンプレート内の式（{{ message }} など）はコンポーネントのデータモデルにバインドされます。

1、データバインディング

データバインディングは宣言的レンダリングの核心です。

データをバインドすることで、Vue は DOM 要素のコンテンツを自動的に更新でき、従来の手動による DOM 操作を回避できます。

補間式

補間式は二重波括弧{{ }}を使用して、コンポーネントのデータを HTML テンプレートに挿入します。

例

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    };
  }
};
</script>

上記の例では、二重波括弧{{ message }}はレンダリングされHello, Vue 3!、message の値が変わると、ビューは自動的に更新されます。

二重波括弧内の内容は、識別子やパスに限定されません。任意の有効な JavaScript 式を使用できます。

<h1>{{ message.split('').reverse().join('') }}</h1>

属性バインディング

によってv-bindディレクティブを使用すると、HTML 属性をコンポーネントのデータにバインドでき、DOM 要素の属性（href、class、src など）をコンポーネントの状態に応じて動的に更新できます。

例

<template>
  <div>
    <a v-bind:href="url">クリックして</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://www.example.com'
    };
  }
};
</script>

上記の例では、v-bind:href は url データを <a> タグの href 属性にバインドします。url が変わると、href は自動的に更新されます。

条件付きレンダリング

Vue は v-if、v-else-if、v-else ディレクティブを使用して条件付きレンダリングを実装し、特定のデータ条件に基づいて DOM 要素をレンダリングするかどうかを決定します。

例

<template>
  <div>
    <p v-if="isVisible">このテキストは表示されています</p>
    <button @click="toggleVisibility">表示を切り替える</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

上記の例では、isVisible が true の場合、<p> タグがレンダリングされます。ボタンをクリックすると isVisible が反転し、<p> タグの表示・非表示も自動的に切り替わります。

リストレンダリング

v-for ディレクティブを使用すると、リストをレンダリングできます。

Vue は配列の各項目に応じて対応する DOM 要素をレンダリングし、配列データが変更されるとビューを自動的に更新します。

例

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Vue 3' },
        { id: 2, name: 'JavaScript' },
        { id: 3, name: 'HTML' }
      ]
    };
  }
};
</script>

上記の例では、v-for は items 配列に基づいてリストをレンダリングします。各リスト項目には key があり、Vue が各項目を追跡するのに役立ち、レンダリング効率が向上します。

双方向データバインディング

Vue は v-model ディレクティブを提供し、フォーム要素（<input> など）とコンポーネントデータ間の双方向バインディングを実装します。これにより、フォーム要素の値とデータモデルが同期し、ユーザーが入力するとデータが自動的に更新され、データが変化するとビューが自動的に更新されます。

例

<template>
  <div>
    <input v-model="message" placeholder="テキストを入力してください" />
    <p>あなたが入力した内容：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

上記の例では、v-model により input 要素の値と message データが同期します。ユーザーが入力ボックスにテキストを入力すると、message が自動的に更新され、<p> タグ内の内容も自動的に変化します。

イベントハンドリング

Vue は v-on ディレクティブを提供して、DOM イベントをリッスンし、イベント発生時にメソッドを実行します。この方法により、ユーザーの入力やクリックなどのイベントを宣言的に処理できます。

例

<template>
  <div>
    <button v-on:click="increment">クリックして</button>
    <p>クリック数：{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
};
</script>

上記の例では、v-on:click はボタンのクリックイベントをリッスンし、クリックごとに increment メソッドを呼び出して count の値を増やします。count は自動的にビューに更新されます。

算出プロパティ

算出プロパティは、Vue が提供する宣言的な計算値の方法です。

算出プロパティはリアクティブデータに基づいており、依存するデータが変更された場合にのみ再計算されます。

例

<template>
  <div>
    <p>元の金額：{{ amount }}</p>
    <p>税込金額：{{ computedAmount }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      amount: 100
    };
  },
  computed: {
    computedAmount() {
return this.amount * 1.1; // 税率は10%と仮定
    }
  }
};
</script>

computedAmount は算出プロパティであり、amount に基づいて税込金額を計算します。amount が変更されると、手動でビュー更新をトリガーすることなく、computedAmount が自動的に更新されます。

その他の拡張