onMounted computed methods watchの使い方

今回はVueでは欠かせないライフサイクルフックからonMounted computed methods watchの使い方を（＊ライフサイクルフックでもonMountedしか説明しないけど今後書くかも）

onMounted

onMountedはコンポーネントがマウントされた後に呼び出される
onMountedはDOMが描画された後に呼び出される（DOM操作をしたい時に使う）
特定の要素で何かする時などで使う場合はonMounted内で記述する

<p ref="hellow"></p>
<script setup lang="ts">
import {ref,onMounted} from "vue";
const hellow = ref()
onMounted(function(){
　　　　const testDom = hellow.value;
});
</script>

computed

算出プロパティと言われcomputedは、単純な計算やフィルタリングなどの処理を定義したいときに使用する。
監視対象のリアクティブ変数（ref）の値が変わる時に処理をする物
こちらは下記のmethodsと違い値が変わらないと処理をしないのと発火するためのトリガーはないのでv-onなどと使う事はない。

<template>
  <div>
    <input type="text" v-model="message" name="" id="">
    <p>{{ message }}</p>
    <button @click="changeTxt">送信</button>
    <p>{{ changeTxt02 }}</p>
  </div>
</template>

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

const message = ref();

const changeTxt = function(){
  console.log(message.value);
}

const changeTxt02 = computed(function() {
  return console.log(message.value + "10000");
})
</script>

methods

今までの関数と変わらない
特徴としては、内容が変わらなくてもイベントが発火するたびに処理が動く
イベントの発火を起点にしているのでv-onなどが必要

<template>
  <div>
    <input type="text" v-model="message" name="" id="">
    <button @click="changeTxt">送信</button>
  </div>
</template>

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

const message = ref();

const changeTxt = function():void {
  console.log(message.value);
}
</script>

watch or watchEffect

データが変更された際に非同期な処理を行ったり、APIリクエストを発行したりするのに適している
(参考サイト)
上記でどちらが良いかについては書いてあるので見てほしい。
リアクティブ変数の値を監視し、変更があった場合に実行する

const { ref, watchEffect, watch } = require('vue')

const price = ref(100)
const count = ref(1)
let watchResult = 0
let watchEffectResult = 0

// 監視対象は price であり count は監視対象外
watch(price, () => {
  watchResult = price.value * count.value
})
// 監視対象は price と count
watchEffect(() => {
  watchEffectResult = price.value * count.value
})

watchには旧値と新しい値を取る事ができるが、wacthEffectは取れない。参考サイトを見るといいだろう。