Vue.js (3) - 영화검색앱 만들기(작성중)

1) 영화 검색 어플리케이션

1-1. Overview

1. 다량의 영화 데이터를 가져오기
   • axios, async-await
2. input 태그의 값이 변경됨을 인식하기
   • v-model
3. 수집한 영화 데이터 중에서 input태그의 값을 포함하는 데이터를 자동으로 가져오기
   • computed
4. 가져온 영화 데이터를 html에 보여주기
   • v-for, v-bind

1-2. html 뼈대

<form id="main">
    <input
           placeholder="영화 제목을 입력하세요"
           type="text"
    >
</form>
<ul>
    <li>
        <!-- 영화 제목에 따른 데이터를 가져올 장소 -->
    </li>
</ul>
<script src="vue.js"></script>

1-3. computed란?

vue.js 공식사이트 에서 가져왔습니다.

<div id="example">
  
</div>

At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays message in reverse. The problem is made worse when you want to include the reversed message in your template more than once.

That’s why for any complex logic, you should use a computed property.

그러니까 message라는 값을 reverse()같은 여러 함수를 통해서 한꺼번에 관리하면 코드가 복잡해지는데,

심지어 message가 동적으로 변한다면 문제가 더 심각해지기 때문에 그 점을 해결하기 위해서 만들어진게 computed property라고 합니다.

1. 예시

      
   <div id="example">
     <p>Original message: "{{ message }}"</p>
     <p>Computed reversed message: "{{ reversedMessage }}"</p>
   </div>
      
   

   var vm = new Vue({
     el: '#example',
     data: {
       message: 'Hello'
     },
     computed: {
       // a computed getter
       reversedMessage: function () {
         // `this` points to the vm instance
         return this.message.split('').reverse().join('')
       }
     }
   })
   

   그러니까 reversedMessage에 함수값을 넣으면 그 함수의 리턴값이 자동으로 렌더링이 되는 셈이다.

   실제로, vm.reversedMessage의 값은 vm.message가 바뀌면 자동으로 변화되게 된다.

2. Computed Caching

      
   <p>Reversed message: "{{ reverseMessage() }}"</p>
      
   

   사실 위와 같은 기능은 그냥 reverseMessage함수를 methods에 집어넣고 저렇게 렌더해도 똑같습니다.

   그런데 왜 Computed를 사용할까요?

   However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as message has not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.

   그러니까, computed property는 그 함수에 연관된 this.message가 변화될때에만 실행되는데,

   methods에 있는 함수들은 아무 데이터가 변화될때마다 실행되기때문에 훨씬 효율적이라는 것입니다.