소스코드: GoToTheMetaverse/vue-tutorial: vue 강좌 (github.com) 의 vue-1 폴더입니다.
영상주소: https://www.youtube.com/watch?v=hg5fYPwzyQs
yarn 을 사용하구요 yar install 을 해서 설치해야합니다.
vue 를 어느정도 쓰시는 분들이 볼것 같아서 영상엔 이 부분이 없습니다...
1. 초기방법
컴포지션이전 시대의 방식입니다.
this 가 자주 들어가서 귀찮아지고 버그도 생기기 마련입니다.
<script>
export default {
data() {
return {
a: 0,
};
},
mounted() {
this.a = 1;
},
methods: {
onClick() {
this.a++;
},
},
};
</script>
2. 컴포지션 초기
setup() 함수를 작성하며 함수 마지막에 return 이 있는게 특징입니다.
this 는 없는 대신 value 가 있군요 (좋을게 없습니다.)
<script>
import { defineComponent } from "@vue/composition-api";
import { onMounted, ref } from "vue";
export default defineComponent({
setup() {
let a = ref();
onMounted(() => {
a.value = 1;
});
const onClick = () => {
a.value++;
};
return {
a,
onClick,
};
},
});
</script>
3. <script setup> 으로 시작하며 return 이 없습니다.
return 이라도 없으니 좀 나아졌죠?
<script setup>
import { onMounted, ref } from "vue";
let a = ref(0);
onMounted(() => {
a.value = 1;
});
const onClick = () => {
a.value++;
};
</script>
4. $ref 를 사용하는 방식
최종 방법입니다. 훈륭합니다.
쓰기위해선 reactivityTransform: true 라는 옵션이 들어가야하는데 프로젝트 설정마다 조금씩 다른거 같군요
vue.config.js 를 쓰기도하고 vite.config.js 를 쓰기도 하네요. 각자 프로젝트에 맞게 찾으셔야할것 같습니다.
reactivityTransform <-- 요게 키워드입니다.
<script setup>
import { onMounted } from "vue";
let a = $ref(0);
onMounted(() => {
a = 1;
});
const onClick = () => {
a++;
};
</script>
또한 eslint 를 사용한다면 $ref 가 없다고 에러를 밷는경우가 있는데요.
'$ref' not defined
이런에러 입니다.
제 경우엔 .eslintrc.js 를 수정해야했습니다.
// .eslintrc.js
module.exports = {
// (생략)
globals: {
$ref: "readonly",
$computed: "readonly",
$shallowRef: "readonly",
$customRef: "readonly",
$toRef: "readonly",
},
};
global 변수 등록 해줬습니다.