전체 글291 computed cache 위의 예제에서 methods의 reverseMsg()를 사용하는 것과 computed의 reveresedMsg 를 사용하는 것은 같은 값을 리턴한다. html부분에서 각각 3 번씩 사용했다. 이 때 reversedMsg를 3 번 사용해도 'euV olleH'를 만드는 작업은 1회만 이루어 진다. 한 번 계산이 되면 계속 사용만 하는 것이다. 복잡한 연산이 이루어지는 경우면서 자주 사용되는 값은 computed에 등록하여 사용하는 것이 유리할 것이다. 2020. 7. 8. computed getter, setter js의 computed에 보면 reversedMsg가 있다. get, set 함수가 존재하는 것을 의미한다. get은 reversedMsg라는 이름을 썼을 때 사용할 값을 리턴해주면 된다. 즉, get의 리턴값이 reversedMsg라는 이름을 통해 사용할 값이다. 이 값은 msg가 변경될 때 최초 1회만 계산한다. msg가 변경되고 나서 여러 번의 reversedMsg를 사용해도 reversedMsg 값은 msg 변경 후 계산된 그 값을 계속 사용한다. set은 reversedMsg = "" 와 같이 값을 변경할 때를 위해 정의해야 한다. 2020. 7. 8. watch, computed computed computed는 캐싱 효과가 있다. reversedMsg는 msg 데이터가 변경 될 때 계산해두고 계속 사용한다. msg가 변경되지 않으면 다시 계산되지 않는다. 다음과 같은 순서로 진행된다. 1. msg 변경 2. computed의 reveresedMsg 다시 계산 computed 의 set은 vm.reversedMsg ="new value~" 와 같이 변경할 때 사용된다. watch watch는 Vue의 데이터가 변경될 때 작동하는 부분이다. vm.msg = "bye bye" 로 변경하면 다음과 같이 동작한다. 1. vm.msg 가 "bye bye" 로 변경 2. watch의 msg()가 작동 3. computed의 reversedMsg에서 msg를 사용하므로 갱신됨. 4. watc.. 2020. 7. 8. toggle box vue를 이용하여 toggle box를 만들어 보자. 코드는 다음 링크에 있다. https://codepen.io/parkhojung/pen/jOWzwmM toggle box ... codepen.io html과 js 코드만 설명하도록 한다. 1. id="app"으로 하여 Vue 컴포넌트를 추가할 div를 만듦 2. 2020. 7. 8. 이전 1 ··· 20 21 22 23 24 25 26 ··· 73 다음
