computed

  • HTML을 랜더링할 때 필요한 값을 생성하는 함수의 일종
  • methods 속성에서 함수를 정의하는 것 대신 사용한다.

함수와 기능이 동일하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
 
<div id="test1">
    <h3>a1 : {{ a1 }} </h3>
    <h3>a2 : {{ a2 }} </h3>
    <h3>a1 + a2 : {{ a1 + a2}} </h3>
    <h3>test_method : {{ test_method() }}</h3>
    <h3>test_computed : {{ test_computed }}</h3>
</div>
 
<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el : '#test1',
        data : {
            a1 : 100,
            a2 : 200
        },
        methods : {
            test_method : function(){
                return this.a1 + this.a2
            }
        },
        computed : {
            test_computed : function(){
                return this.a1 + this.a2
            }
        }
    })
</script>
</body>
</html>
cs


캐싱에 차이가 있다.

  • methods : 반환하는 값이 계속 같아도 함수가 계속 호출된다.
  • computed : 반환하는 값이 변하지 않았다면 이전에 반환한 값을 기억해 두었다가 그 값을 그대로 사용한다.


method는 계속 출력되는 반면 computed는 한번만 호출되는걸 볼 수 있다.




저작자표시

'Vue' 카테고리의 다른 글

set, get  (0) 2019.07.31
Watch 와 Computed  (0) 2019.07.31
Watch  (0) 2019.07.31
v-html, v-bind  (0) 2019.07.30
컴포넌트 (전역 컴포넌트와 지역 컴포넌트)  (0) 2019.07.30

+ Recent posts

티스토리툴바