vue3 ref분석

vue2에서 cretated(), mounted(), computed() 등의 라이프싸이클은
setup에서 모두 포함시켜 활용 할 수 있다.

특정한 변수에만 해당 라이프 싸이클을 입력하는것이 vue2와 달라진 큰 차이점이라 볼 수 있겠다.

아래는 타입스크립트에서 ref객체를 사용하는 예제이다.

<template>
  <div ref="div"> </div>
  <button @click="test"> 버튼 </button>
</template>
<script lang="ts">
import { defineComponent, ref} from 'vue';
export default defineComponent({
  name : 'View_Comment',
  props : {
    bo_table:String,
    wr_id:String
  },
  setup(props) { //props, 상위 객체가 있을시 props로 값을 받을 수 있다.
    const bo_table = props.bo_table;
    const wr_id = props.wr_id; //값을 받는 방법을 간단하게 예제로.. 사용하지는 않는다.
    const div = ref(false); //변수명과 ref이름이 동일해야한다. const로 반드시 선언해야한다.
    return {
      div //div를 리턴해준다.
    },
    methods : {
      test() {
       console.log(this.$refs.div);
      }
    }
  },
})

일반 js 예제

<template>
  <div ref="div"> </div>
  <button @click="test"> 버튼 </button>
</template>
<script>
import { ref} from 'vue';
export default {
  name : 'View_Comment',
  props : {
    bo_table:String,
    wr_id:String
  },
  setup(props) { //props, 상위 객체가 있을시 props로 값을 받을 수 있다.
    const bo_table = props.bo_table;
    const wr_id = props.wr_id; //값을 받는 방법을 간단하게 예제로.. 사용하지는 않는다.
    const div = ref(false); //변수명과 ref이름이 동일해야한다. const로 반드시 선언해야한다.
    return {
      div //div를 리턴해준다.
    },
    methods : {
      test() {
       console.log(this.$refs.div);
      }
    }
  },
}
</script>