vue3覚書(watch,watchEffect,ライフサイクル)

watch

• 値の変更を監視
• numberの値が変わったら呼ばれる

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

const number = ref(100)

watch(number, () => {
  console.log("watch")
})

const incrementNumber = () => {
  number.value++
}
</script>

<template>
  <div>
    <div>
      {{ number }}
    </div>
    <div>
      <button @click="incrementNumber">increment</button>
    </div>
  </div>
</template>

第一引数に監視したいデータ、第二引数にコールバック関数を指定する

• crには変更後の値が入る
• prevには変更前の値が入る

watch(number, (cr, prev) => {
  console.log("number", number.value)
  console.log("cr", cr)
  console.log("prev", prev)
  console.log("number", number.value)
})

watchEffect

• やれることはwatchと同じ
• watchより簡単にかける
• 自動的にコンポーネント内のreactiveな値が監視される

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

const number = ref(100)

watchEffect(() => {
  console.log(number.value)
})

const incrementNumber = () => {
  number.value++
}
</script>

<template>
  <div>
    <div>
      {{ number }}
    </div>
    <div>
      <button @click="incrementNumber">increment</button>
    </div>
  </div>
</template>

ライフサイクル

コンポーネントの読み込み時

• created
• onBeforeMount
• onMounted

リソース呼び出し時

• onBeforeUpdate
• onUpdated

コンポーネントの読み込み終了時

• onBeforeMount
• onUmounted

親コンポーネント

• IsShowで子コンポーネントのマウント、アウンマウントを切り替え

<script setup lang="ts">
import { ref } from 'vue';
import LifeCycle from './components/LifeCycle.vue';

const IsShow = ref<Boolean>(false)
const ChangeIsShow = (Boolean: boolean) => {
  IsShow.value = Boolean
}
</script>

<template>
  <div>
    <LifeCycle v-if="IsShow"/>
    <button @click="ChangeIsShow(true)">show</button>
    <button @click="ChangeIsShow(false)">hide</button>
  </div>
</template>

子コンポーネント

<script setup lang="ts">
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
const text = ref<string>('aiueo')

// 読み込み時
onBeforeMount(() => {
  console.log("onBeforeMount")
})

onMounted(() => {
  console.log("onMounted")
})

onBeforeUpdate(() => {
  console.log("onBeforeUpdate", text.value)
})

// textに変更があったとき
onUpdated(() => {
  console.log("onUpdated", text.value)
})

// textが変更される前
onBeforeUnmount(() => {
  console.log("onBeforeUnmount")
})

// 読み込み終了時
onUnmounted(() => {
  console.log("onUnmounted")
})

console.log("created")
</script>

<template>
  <div>
    <h1>TestLifeCycle</h1>
    <div>
    <input type="text" v-model="text" placeholder="input test" />
    <div>{{ text }}</div>
    </div>
  </div>
</template>