[Vue] Computed 속성

1 computed 속성

---

너무 많은 연산을 템플릿 안에서 사용하면 코드가 비대해지고 유지보수가 어렵다.

 

    <div id="app">
        {{ message.split('').reverse().join('') }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: '안녕하세요'
            },
            methods: {
            
            },
        })
    </script>

결과값 : 요세하녕안

 

위와 같이 긴 연산자는 computed로 처리해줄 수 있다.

 

    <div id="app">
        {{ reverseMessage }}
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: '안녕하세요'
            },
            methods: {
            
            },
            computed:{
                reverseMessage(){
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>

결과값 : 요세하녕안

 

computed로 처리해줄 때는 함수와 달리

{{ }} 중괄호 안에 computed의 이름만 넣어주면 된다.

 

그래서 이때 드는 의문은 '그냥 함수로 처리해주면 되는거 아닌가?' 라는 생각이 든다.

 

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

    <script>
        new Vue({
            el: '#app',
            data: {
                message: '헬로우'
            },
            methods: {
                reverseMessage(){
                    return this.message.split('').reverse().join('')
                }
            },
            computed:{
                
            }
        })
    </script>

함수로 처리해주면 함수를 실행시키기 위해 이름 뒤에 ()소괄호만 넣어주면 똑같이 실행된다.

 

그렇다면 computed와 methods의 차이는 뭘까?

---

computed는 캐싱을 한다.

캐싱(저장)이 되어있어서 여러번 사용할 때도 저장된 값을 사용해서 좀 더 효율적이다.

 

버튼을 눌렀을 때 글자 바꾸기

    <div id="app">
        <button @click="changeMessage">Click</button>
        {{ reverseMessage() }}
        {{ reverseMessage() }}
        {{ reverseMessage() }}

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: '헬로우'
            },
            methods: {
                reverseMessage(){
                    return this.message.split('').reverse().join('')
                },
                changeMessage(){
                    this.message = '안녕히가세요';
                }
            },
            computed:{
                
            }
        })

결과값 :