[Vue] 템플릿 프로젝트 구성

computed

    <div id="app">
        <p>{{reversedMessage}}</p>
        <button v-on:click="reversedMessage">문자열뒤집기</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            },
            computed: {
                reversedMessage: function(){
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>

methods

    <div id="app">
        <p>{{message}}</p>
        <button v-on:click="reverseMsg">문자열뒤집기</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            },
            methods: {
                reverseMsg: function(){
                    this.message = this.message.split('').reverse().join('');
                    return this.message;
                }
            }
        })
    </script>

methods 속성은 수행할 때마다 연산을 하기때문에 별도 캐싱x, 호출할때만 로직수행(수동적)
computed 속성은 데이터가 변경되지 않는 한 이전의 계산 값ㅇ르 가지고 있다가 필요할 때 바로 반환

복잡한 연산을 반복수행해서 화면에 나타낼 때 : computed

---

watch

데이터 변화를 감지하여 자동으로 특정 로직수행
computed는 내장 API를 활용한 간단 연산에 적합하고 watch 속성은 데이터호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합

    <div id="app">
        <input v-model="message">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!'
            },
            watch: {
                message: function(data){
                    console.log("message의 값이 바뀝니다 : ", data);
                }
            }
        })
    </script>

실시간으로 바뀌는것을 확인할 수 있다

v-model 속성은 input, textarea, select 속성에만 사용가능

---