Vue3 - onMounted - 온마운티드

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

const blr = ref(true)
const pElementRef = ref(null)

function clicks() {
    blr.value = !blr.value
  test()
}
  const test = ()=>{
        if (blr.value) {
        pElementRef.value.innerText = "하이"
    } else {
        pElementRef.value.innerText = "실패"
    }
  }
onMounted(() => {
test()
})
</script>

<template>
    <button @click="clicks">
        변경
    </button>
    <p ref="pElementRef">안녕</p>
</template>

 

온마운트는 템플릿코드가 실행된후에 실행되는것이다.

그래서 함수를 만들고 html 그려진후에 실행하려면 온마운트를 사용해서 함수를 그안에 넣어주면 실행하게된다.

 

그러면 온마운티드를 이용해서 html 이 그려진후에 데이터를 불러와서 넣어주면 좋지않을까?

와치같은경우는 리액트의 유스이펙트의 useEffect 의 [] 부분에 해당하는 느낌이다.

 

onMounted 는 html이 그려진후에 적용되는 것이다.