1. watch 속성

<script>
    new Vue({
        el: '#app',
        data: {
            num: 10
        },
        watch: {
            num: function() {
                this.logText();
            }
        },
        methods: {
            addNum: function() {
                this.num = this.num + 1;
            },
            logText: function() {
                console.log('changed');
            }
        }
    });
</script>

2. watch 속성과 computed 속성의 차이

new Vue({
    el: '#app',
    data: {
        num: 10
    },
    computed: {
        doubleNum: function() {
            return this.num * 2; 
            // 데이터의 의존성 높음
            // 빠르게 계산함
            // 단순한 값에 대한 계산에 용이
        }
    },
    watch: {
        num: function(newValue, oldValue) {
            this.fetchUserByNumber(newValue);
            // 무거운 로직을 돌릴 때 사용
            // 매번 실행되기 부담스러운 일을 하는데 용이
            }
        },
    methods: {
        fetchUserByNumber: function(num) {
            // console.log(num);
            axios.get(num);
        }
    }
});

웬만하면 computed를 쓰는게 좋다고 공식문서에서 말했다.

3. computed 속성을 이용한 직관적인 코드 작성

클래스 바인딩쪽 코드

<!-- head 쪽 코드 -->
<style>
    .warning {
        color: red;
    }
</style>


<!-- body 쪽 코드 -->
<div id="app">
<p v-bind:class="errorTextColor">Hello</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            // cname: 'blue-text',
            isError: false
        },
        computed: {
        errorTextColor: function() {
            return this.isError ? 'warning' : null;
            }
        }
    });
</script>