reactive 함수를 활용한 DOM 리랜더링

reative 함수의 인자로 넘어가는 데이터는,

이 데이터의 어딘가가 변경되었을때, 해당 데이터를 사용하는 DOM 을

다시 랜더링하게 한다.

 

<!-- App.vue -->

<template>

    <button @click="click">click</button>
    <div> {{ state.value }} </div>

</template>

<script>

    import { reactive } from 'vue'

    export default {

        setup() {

            const state = reactive({

                value : 0

            })

            function click() {

                state.value = 1

            }

            return { state, click }

        }

    }

</script>