Computed의 장점에 대해서

computed

Computed를 사용하는 장점

1.가독성

2.캐싱


아래의 예제에서 msgFun는 세번 실행되며 msgCaching는 한번 실행된후 캐싱된 값이 3번출력된다

즉 msgFun는 3번 msgCaching는 1번이다 ( 캐싱 )

그리고 this.msg.split('').reverse().join('')와 같이 긴 문장을 msgCaching 문장으로 정의 할수있기때문에 가독성이 좋다 ( 가독성 )

<div id="app">
    <div>{{ msgFun() }}</div>
    <div>{{ msgFun() }}</div>
    <div>{{ msgFun() }}</div>
    <div>==============</div>
    <div>{{ msgCaching }}</div>
    <div>{{ msgCaching }}</div>
    <div>{{ msgCaching }}</div>
</div>

<script>
	const vm = new Vue({
    	el: '#app',
          data: {
          msg: 'abc'
        },
            
        methods: {
          msgFun () {
            return this.msg.split('').reverse().join('')
          }      
        },
            
        computed: {
          msgCaching () {
            return this.msg.split('').reverse().join('')
          }
        }
	})
</script>


2024/1/15

※주의사항

읽기 전용이기때문에 v-model등의 양방향 바인딩을 사용할 경우 변경이 되지않는다.

그렇기때문에 v-model등의 읽기/수정이 가능한 양방향 바인딩을 사용할 경우 watch를 사용하는것이 좋다


참고

Computed의 장점에 대해서

Sep 23, 2023 Views 97