코딩자습서/020 vue / 변수 사용의 여러가지 버전 / $ref / .value

소스코드: 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 변수 등록 해줬습니다.