Skip to content

Vue:API

Vue의 API 목록 정리

$data, $props

데이터 옵션들에 접근 가능한 속성이다. 해당 컴포넌트의 data 옵션과 props 옵션의 내용에 접근 가능하다.

$el

el은 Element의 줄임말로, Vue 인스턴스의 DOM 엘리먼트를 의미한다. 컴포넌트의 엘리먼트는 HTMLElement 타입의 DOM 객체다.

$root

$root속성은 그중 가장 위에 있는 부모인 트리의 루트를 의미하는 것이다. Vue CLI를 통해 생성한 프로젝트는 보통App 컴포넌트가 루트 컴포넌트다.

$parent, $children

$parent 속성과 $children 속성은 현재 인서턴스의 부모와 자식들을 의미 한다. 부모는 언제나 하나 이지만 자식은 둘 이상이 있을수 있으므로 복수형이다.

$attrs

$attrs 속성은 현재 컴포넌트에 주어진 HTML 속성 중 props 데이터로 인식되지 않는 속성들을 의미한다.

this.$attrs.id

$set, $delete

반응형으로 선언된 값을 업데이트하거나 제거하는 메소드다.

$on

$on 메소드는 인스턴스에 이벤트 핸들러를 등록할 수 있는 메소드다. 기본적으로 v-on 디렉티브와 같은 기능을 가지고 있다. 이벤트는 $emit 메소드에 의해 호출된다. $on 메소드에 등록된 이벤트 핸들러는 인자로 $emit 이벤트에서 넘어온 인자를 수신한다.

$once

$once 메소드는 $on 메소드와 동일한 기능을 가지고 있으나 이벤트 핸들러가 단 한번만 실행된다. $once 메소드를 통해 등록된 이벤트 리스너는 한 번 호출되면 바로 제거된다.

$off

$off 메소드는 등록된 사용자 정의 이벤트를 제거한다. $off 메소드는 주어진 인자에 따라 어떤 이벤트 리스너를 제거할 것인지 선택적으로 제거할 수 있다.

$forceUpdate

$forceUpdate 메소드는 인스턴스를 강제로 다시 렌더링하는 메소드다. 하위 컴포넌트나 인스턴스에 영향을 끼치지 않고 $forceUpdate 메소드가 실행된 인스턴스만 다시 렌더링 된다. Vue의 상태 감시 로직이 완벽한 것은 아니기 때문에 간혹 상태는 변경되었으나 화면에 변경된 상태가 반영되지 않는 경우가 발생할 수 있다. 이런 경우에 이 메소드를 사용하여 컴포넌트를 강제로 다시 렌더링함으로써 상태를 화면에 반영할 수 있다ㅏ. 그러나 렌더링이라는 작업 자체가 비용이 많이 드는 작업이므로 과도하게 사용한다면 애플리케이션의 성능이 하락할 수 있는 주원인이 될 수 있다.

$nextTick

$nextTick메소드는 다음 렌더링 사이클 이후 실행될 콜백 함수를 등록할 수 있는 기능을 제공하는 메소드다. Vue가 상태가 갱신된 후 갱신된 상태를 토대로 화면을 다시 그리는 주기를 틱(Tick)이라고 부른다.

See also

Favorite site