vue.js__computed 속성 , watch 속성 + 자바스크립트 표현식

🌱 vue에 자바스크립트 표현식 적용하기

: 데이터 바인딩 방법 중 하나인 {{ }} 안에 자바스크립트 표현식을 넣으면 됨.

예시) 
    ...
	<div id='test'>
    	   <p>{{ message }}</p>
           <p>{{ message + '!!!' }}</p>
           <p>{{ message.split('').reverse().join('') }}</p>
   	</div>
    ...
    	<script>
           new Vue({
           	el: '#test',
            	data : {
                    message: 'hello~~~~!!'
                }
           })
        </script>

👉 vue에서 자바스크립트 표현식 사용할 때 주의할 점!
1. template안에서는 자바스크립트의 선언문과 분기 구문을 사용할 수 없다.
2. 복잡한 연산은 인스턴스 안에서 처리하고, 화면 안에서는 연산 결과만 표시해야 한다.

ex) 
 ...
    <div id='test'>
	<!-- 1번 예시 -->
	{{ const a =  10; }}    <!--(X) 선언문 사용 불가 !! -->
   	{{ if (true) { return 100 }}   <!--(X) 분기 구문 사용 불가 !! -->
        {{ true ? 100 : 0 }} <!--(O) 삼항연산자 사용 가능 -->
   
   
   	<!-- 2번 예시 -->
        {{ message.split('').reverse().join('') }} <!--(X)복잡 연산 안돼 -->
        {{ reversedMessage }} <!-- (O) 아래 computed속성으로 계산 한 최종값 -->
   </div>
 ...
   <script>
   	new Vue({
       	    el: '#test',
               data: {
               	   message: 'hello~~~!!!'
               },
               computed : {      // 데이터 속성을 자동으로 계산해주는 속성
               	  reversedMessage: 
                     function(){
                       return this.message.split('').reverse().join('');
                       // this.message = data안의 message
                     }
               }
       })
   </script>
   

---

👉 computed 속성

• 데이터 속성을 자동으로 계산해주는 속성
• 인스턴스 안에 선언해준 특정 변수안에 함수를 담아 연산을 먼저 하고 화면에 결과를 보여줌.
• method와 다른 점
  인자를 받지 못함. data안에 들어있는 데이터만을 this를 이용해 사용할 수 있음.
  method는 이벤트같은 함수를 실행하게 해주는 역할.
  
• html에는 최종적으로 표현될 값만 보여주고, 데이터의 기본 연산은 자바스크립트 단에서 함으로써 화면단(template) 코드의 가독성이 좋아짐. (=ui구조 파악 쉬움)
• 반복적인 연산이 있을 때 미리 계산하여 저장해두고, 필요할 때 바로 불러오는 캐싱(caching) 효과를 얻을 수 있음.

- 내장 api를 활용한 간단한 연산 정도에 적합.

---

👉 watch 속성

• 변수를 계속 지켜보면서 데이터 변화를 감지하면 자동으로 특정 로직 수행하는 속성.

- 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합.