ref
<template>
<div class="title">
<p>{{ name.title }}</p>
<button v-on:click="updateName">Click</button>
</div>
</template>
<script lang="ts">
import { ref } from 'vue';
export default {
setup() {
const name = ref("test")
const updateName = () => {
name.value = "Stroud"
}
return {
name,
updateName
};
},
};
</script>
<style></style>ref는 String, Number, Object 등 어떠한 타입에서도 사용할 수 있다.
ref는 .value property를 붙여 접근할 수 있다.
reactive
<template>
<div class="title">
<p>{{ name.title }}</p>
<button v-on:click="updateName">Click</button>
</div>
</template>
<script lang="ts">
import { reactive, ref } from 'vue';
export default {
setup() {
const name = reactive({
title: "test"
})
const updateName = () => {
name.title = "Stroud"
}
return {
name,
updateName
};
},
};
</script>
<style></style>
reactive는 Object, Array, Map, Set과 같은 타입에서만 사용할 수 있다.
reactive는 .value property를 붙일 필요 없이 <template>에서 사용하는 JavaScript 문법처럼 사용하면 된다.
