Vue.js computed속성 과 watch속성

 

Vue는 Vue인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 watch속성을
제공합니다.
다른 데이터 기반으로 변경할 필요가 있는 데이터가 있는 경우, 
특히 AngularJS를 사용하던 경우 watch를 남용하는 경우가 있습니다.
하지만 명령적인 watch 콜백보다 계산된 속성을 사용하는 것이 더 좋습니다. 
watch 속성은 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 
실행하라는 방식으로 소프트웨어 공학에서 이야기하는 명령형 프로그램 방식.
computed속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 소프트웨어 공학에서
이야기하는 선언형 프로그램 방식.

HTML 부분
<div id="demo">{{fullName}}</div>

JS부분
var vm = new Vue({
    el : "#demo", 
    data : {
        firstName : "Foo",
        lastName : "Bar",
        fullName : "Foo Bar"
    },
    watch : {
        firstName : function(val){
            this.fullName = val + ' ' + this.lastName
        },
        lastName : function(val){
            this.fullName = this.firstName + ' ' + val
        }
    }
})

위의 코드는 명령형이고 또 코드를 반복합니다. 
computed속성을 사용하는 방식과 비교해 보세요.

JS부분
var vm = new Vue({
    el : "#demo",
    data : {
        firstName : "Foo", 
        lastName : "Bar"
    },
    computed : {
        fullName : function(){
            return this.firstName + ' ' + this.lastName
        }
    }
})

일반적으로 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복이 적은 등 
우수하다고 평가하는 경향이 있음