エンジニアとしての市場価値を測りませんか?PR

企業からあなたに合ったオリジナルのスカウトを受け取って、市場価値を測りましょう

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Vue】Computedに関するメモ

Last updated at Posted at 2024-06-22

はじめに

こんにちは、Mottyです。
今回はリアクティブな処理に関するComputedについての簡易メモとなります。

Computedプロパティについて

computedプロパティはリアクティブな値の変更のみを感知します。computedプロパティは依存しているリアクティブな値が変更されたときに自動的に再計算されます。例えば、以下のようなコードを考えてみます↓

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);

const doubleCount = computed(() => {
  return count.value * 2;
});

// count.valueを変更するとdoubleCountも自動的に更新される
</script>

この例では、countがリアクティブな値として定義されており、doubleCountはcountに依存しているため、count.valueが変更されると自動的にdoubleCountも再計算されて更新されます。

リアクティブではない値を使用している場合、その値の変更は感知されません。例えば、次のような場合↓

<script setup>
import { ref, computed } from 'vue';

let nonReactiveValue = 0;

const count = ref(0);

const doubleCount = computed(() => {
  return count.value * 2 + nonReactiveValue;
});

// nonReactiveValueの変更はdoubleCountに影響を与えない
</script>

この場合、nonReactiveValueはリアクティブではないため、nonReactiveValueの値を変更してもdoubleCountは再計算されません。computedプロパティは依存しているリアクティブな値が変更されたときのみ再計算されるという性質を持っています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?