Vue re-rendering 방지하기 2 : template 에서 함수 사용하지말것

re-rendering 을 원한다면 함수를 써도 되지만,

static 한 style 일 경우 return 값으로 넘겨야한다.

<template>
    
    <div v-text="Math.random()"></div>

</template>

위 경우 해당 컴포넌트에 무슨일이 일어날때마다, v-text 가 변한다.

이것을 방지하려면,

<template>
    
    <div v-text="randomValue"></div>

</template>

<script lang="ts">

    export default {

        setup() {

            const randomValue = Math.random()

            return { randomValue }

        }
        
    }

</script>

위와 같이 생성후 return 해주어야한다.

이는 v-text 뿐아니라 :style 에도 적용된다.

의도적으로 무슨일이 생길때마다 랜더링을 원하다면 함수를 바로 사용하는것이고,

아닐 경우 return 한다.