[vue3] $refs (vue2) vs ref (vue3)

1.$refs (vue2)

<template>
  <div>
    <p ref="name">dohee</p>
  </div>
</template>

<script>
export default {
  // ...
  methods: {
    getNameNode() {
      console.log(this.$refs.name); //<p>dohee</p>
    }
  }
}
</script>

2. ref (vue3)

<template>
  <div>
    <p ref="name">dohee</p>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue';

export default {
  // ...
  setup() {
    //ref명과 동일한 변수명 선언 !
    const name = ref();

    onMounted(() => {
      console.log(name.value); //<p>dohee</p>
    });
        
    return { name };
  }
}
</script>