1. Vue3 計算プロパティ

1. Vue3 計算プロパティの基本的な使い方

一部のデータに対して論理演算を実行する必要がある場合、次のようにテンプレートで式を使用できます。

<script setup lang="ts">
import { reactive } from "vue";
const onePeople = reactive({
  name: "Sam Xiaoguai",
  chineseName: [
    "萨姆",
    "小乖"
  ]
});
</script>
<template>
  <div>
    {
   
   { onePeople.chineseName.length > 0 ? "有中文名" : "没有" }}
  </div>
</template>
<style scoped></style>

しかし、テンプレートにロジックを書きすぎると、テンプレートが肥大化して保守が難しくなります。したがって、計算されたプロパティcomputed() メソッドを使用して、リアクティブ状態に依存する複雑なロジックを記述することができ、戻り値は計算されたプロパティ ref です。

<script setup lang="ts">
import { reactive,computed } from "vue";
const onePeople = reactive({
  name: "Sam Xiaoguai",
  chineseName: [
    "萨姆",
    "小乖"
  ]
});
// 一个计算属性 ref
const haveChineseName = computed<string>(() => {
  return onePeople.chineseName.length > 0 ? "有中文名" : "没有"
})
</script>
<template>
  <div>
    {
   
   { haveChineseName }}
  </div>
</template>
<style scoped></style>

2. 計算されたプロパティキャッシュと通常のメソッド

<script setup lang="ts">
import { reactive,computed } from "vue";
const onePeople = reactive({
  name: "Sam Xiaoguai",
  chineseName: [
    "萨姆",
    "小乖"
  ]
});
// 一个计算属性 ref
const haveChineseName = computed<string>(() => {
  return onePeople.chineseName.length > 0 ? "有中文名" : "没有"
})
function haveChineseNameFun ():string {
    return onePeople.chineseName.length > 0 ? "有中文名" : "没有"
}
</script>
<template>
  <div>
    {
   
   { haveChineseName }}
  </div>
  <div>
    {
   
   { haveChineseNameFun() }}
  </div>
</template>
<style scoped></style>

両方のアプローチの結果はまったく同じであることがわかりますが、違いは、計算されたプロパティ値がリアクティブな依存関係に基づいてキャッシュされることです。計算されたプロパティは、そのリアクティブな依存関係が更新されたときにのみ再計算されます。これは、変更されない限り onePeople、何度アクセスしても、 haveChineseNameゲッター関数を繰り返し実行しなくても、直前の計算結果がすぐに返されることを意味します。

Date.now() 次のように: 計算されたプロパティは、リアクティブな依存関係ではないため、更新されません。

対照的に、再レンダリングが発生すると、メソッド呼び出しは常に関数を再度実行します。

<script setup lang="ts">
import {  computed } from "vue";
const now = computed<number>(() => Date.now());
function nowTime(): number {
  return Date.now();
}
</script>
<template>
  <div>
    {
   
   { now }}
  </div>
  <div>
    {
   
   { now }}
  </div>
  <div>
    {
   
   { now }}
  </div>
  <div>
    {
   
   { nowTime() }}
  </div>
  <div>
    {
   
   { nowTime() }}
  </div>
  <div>
    {
   
   { nowTime() }}
  </div>
</template>
<style scoped></style>

nowTime を含む div を追加すると、それに応じてページの nowTime の値が変更されることがわかりますが、現在は変更されていません。

そのため、 list巨大な配列をループして多くの計算ロジックを実行する必要がある非常にパフォーマンスを消費する計算されたプロパティがあり、他の計算されたプロパティもそれに依存している可能性がある場合 list。list キャッシュがなければ、 getter を何度も再実行することになりますが、これは実際には不要です! キャッシュが必要ないことが確実な場合は、メソッド呼び出しを使用することもできます。

3. 書き込み可能な計算されたプロパティ

計算されたプロパティは、既定では読み取り専用です。計算されたプロパティを変更しようとすると、実行時に警告が表示されます。

次のように：

<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('Sam')
const lastName = ref('xiaoguai')
const fullName = computed<string>(() => {
  return firstName.value + ' ' + lastName.value;
});
fullName.value = "samxiaoguai"
</script>
<template>
  <div>
    {
   
   { fullName }}
  </div>
</template>
<style scoped></style>

警告が表示されます ⚠️:

書き込み操作に失敗しました: 計算された値は読み取り専用です

したがって、「書き込み可能な」プロパティを使用する必要がある場合は、ゲッターとセッターの両方を提供することで作成できます

次のように：

<script setup lang="ts">
import { ref, computed } from 'vue'

const firstName = ref('Sam')
const lastName = ref('xiaoguai')
const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
fullName.value = "sam xiaoguai"
</script>
<template>
  <div>
    {
   
   { fullName }}
  </div>
</template>
<style scoped></style>

ご不明な点がございましたら、以下にコメントしていただければ、私がお答えします. この記事がお役に立てば、ぜひご覧ください. ブロガーに感謝します.

Vue3 について: (2) Vue3 の計算属性

1. Vue3 計算プロパティ