Vue3로 바뀌면서 ref의 역할이 바뀜
Vue2 : Dom 또는 컴포넌트를 가리키는 속성
Vue3 : reactive reference를 의미 (반응형 데이터)
Vue2 data() 와 ref()
<div id="app">
<template>
</template>
</div>
<script>
data() {
return {
text: "Hello"
}
},
mounted() {
setTimeout(()=> {
this.text = this.text + " Vue2"
},2000)
}
</script>
Vue3 data() 와 ref()
<div id="app">
<br>
<br>
</div>
<script>
const {
ref
} = Vue;
const App = {
setup() {
let text1 = "Hello";
let text2 = ref("Hello");
setTimeout(() => {
text1 = text1 + " Vue3";
text2.value = text1 + " Jo!!"; //ref 는 .value로 접근해야된다
}, 2000);
return {
text1,
text2,
};
},
};
</script>