[ Vue ] [ Vue3 Vite ] 선언적 렌더링

변수는 선언하고 값을 넣으면 자동으로 DOM에 업데이트가 된다. Options API를 사용하기 위해서는 단순히 data옵션에 변수를 선언하면 되며, 컴포지션 API와 함께 이용하기 위해서는 setup함수를 생성하고 그 안에 일반적인 자바스크립트 변수를 선언하듯이 선언하면 된다. 선언된 변수는 템플릿의 변수와 결합될 수 있도록 반드시 객체 형식으로 반환돼야 한다.

 

template

<template>
    <div>
        <div id="date">
            {{date}}
        </div>
        <div id="date2">
            {{date2}}
        </div>
    </div>
</template>

 

script

export default {
    setup() {
        const date = Date().toString()
        return {
            date
        }
    },
    data() {
        return {
            date2: Date().toString()
        }
    }
}

setup함수 내에서 변수를 선언하고 반환하는 방법과 기존과 동일한 방식의 Options API를 이용해 변수를 선언하고 반환하는 방법을 보여준다.

setup함수에서는 date라는 함수를 선언하고 자바스크립트의 Date클래스의 toString메서드를 이용해 현재 날짜와 시간을 얻어온다.

같은 값을 얻어오지만 Options API는 data라는 별도의 옵션 함수를 이용해 date2에 날짜와 시간을 대입하는 것을 알 수 있다.

Date().toString()