[Vue3/Composition API] 반응형 변수로 만들기, 변수 선언하기


[Vue3/Composition API] 반응형 변수로 만들기, 변수 선언하기

Vue는 계속 업그레이드가 되면서 Vue3에서는 script 작성법이 3가지나 된다. 그중 함수 재사용이 쉽고 많은 장점을 가진 Composition API에 대해서 변수 선언해 보자! 1. 변수 선언하기 <template> <div> {{name}} </div> </template> <script> export default { setup(){ const name = "까치브라" const birth = 12.25 return{ name, birth, } } } </script> 출력 결과물 setup( ){ }중괄호 안에 변수를 선언을 해준 후, return{} 중괄호 안에 선언한 변수를 다시 적어준다. 기존 보다 간단하게 변수 선언을 한 것 같다. 이렇게 선언 시 변수는 웹 페이지에서 반응하지 않는다. 동적으로 반응하기 위해서는 추가적인 작업이 필요하다. 2. 변수를 반응형으로 만들어 주기 반응형으로 만들기 위해 'ref'와 'reactive' 가 있다. 하지만 'ref' 하나...


#compositionAPI #vue #Vue3 #반응형만들기 #반응형변수 #반응형변수선언 #변수선언

원문링크 : [Vue3/Composition API] 반응형 변수로 만들기, 변수 선언하기