안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - git: 2.37.1.windows.1 - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 - @vue/cli(vue3): 5.0.8 vue state 변수를 감지하여 실행하는 프로퍼티 watch에 대해 알아보도록 하겠습니다. ※ state(ref, reactive)로 선언된 변수가 아니면 watch를 사용할 수 없습니다. 1. watch 프로퍼티를 import 하기 import { ref, watch } from 'vue'; 2. watch 프로퍼티 사용하기 # watch(ref변수명, (현재 값, 이전 값) => { 구현체 }); watch(searchText, (c..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 ＃값 변경은 ref로 사용할 수 있지만, reactive도 변경할 수 있습니다. ref는 모든 형식에 사용할 수 있지만, reactive는 Object, List만 사용할 수 있습니다. 그럼 ref가 더 좋은 게 아니냐라고 생각할 수 있지만, reactive는 ref보다 간결하게 코딩이 가능합니다. 또한, reactive는 계산 속성이 가능합니다. (ref는 사용 불가) # ref는 값을 변경하기 위해서 변수명.value를 사용했지만, reactive로 선언된 변수는 바로 바인딩이 가능합니다. # reactive는 계산 속..

안녕하세요! 프뚜(프로그래머 뚜)입니다! [개발 환경] - OS: windows 10 64bit - nodejs: v16.16.0 - npm: 8.15.0 - yarn: 1.22.19 ＃VUE2에서는 값을 변경할 땐 data영역에 있는 값을 this. 접근 후 변경했습니다. ＃VUE3에서는 data, methods가 setup에서 처리할 수 있게 되었습니다. 변수의 값을 변경 할 때, ref를 사용하지 않은 변수는 값 변경이 불가능합니다. ref를 사용한 변수를 변경할 때는 '변수명.value'로 값을 변경해야합니다. 값 변경 function을 실행했지만 ref로 지정하지 않은 notRefName은 변경되지 않는 걸 볼 수 있습니다. 궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 ..