Vue 인스턴스의 속성과 메소드 ($attrs, $set, $delete, $nextTick, $emit, $forceUpdate...)

Vue 인스턴스 및 Vue 인스턴스가 확장된 컴포넌트에서 사용할 수 있는 속성과 메소드들이다. 그중 자주 사용하는 유용한 속성들을 위주로 살펴보도록 하자.

 

1. vm.$data, vm.$props

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

 

2. vm.$el

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

 

3. vm.$parent, vm.$children, vm.$root

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

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

 

4. vm.$attrs

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

this.$attrs.id

 

5. vm.$set, vm.$delete

$set 메소드는 반응형으로 선언된 값을 업데이트하는 메소드다. Vue 인스턴스 내부에서 data 옵션을 통해 선언된 데이터는 Vue가 변화를 추적하고 있기 때문에 $set 메소드를 사용하지 않아도 값을 갱신할 수 있다.

export default {      data () {           return { count: 0 }      },      methods: {           addCount () {                // $set 메소드를 사용하지 않아도 Vue는 count 변수의 변화를 감지한다.                this.count++;           }      } }

$set 메소드는 반응형 데이터로 객체를 사용할 때 사용한다. Vue는 컴포넌트가 생성될 때 data 옵션에 선언된 데이터들만 반응형 데이터로 인식한다. 이때 Vue는 내부적으로 이 값들을 감시할 감시자(Watcher)들을 생성한다. 그러나 이 감시자들은 객체가 생성될 당시의 속성들은 감지할 수 있지만 새로운 속성이 추가되거나 제거될 때 객체가 변화하는 것은 감지하지 못한다.

export default {      data () {           return {                 message: { text: 'Hello World!' }           }      } }

반응형 데이터로 선언된 message 객체의 경우 text라는 속성을 가지고 있고 Vue는 이 속성을 반응형 데이터로 인식하고 변화를 추적한다. 그러나 message 객체에 새로운 속성이 추가되거나 text 속성을 삭제한다면 Vue는 이를 감지하지 못한다.

그래서 이렇게 객체에 속성을 추가하거나 삭제할 때 Vue에 '값이 갱신되었습니다'라고 수동으로 알려줄 수 있는 메소드가 바로 $set 메소드와 $delete 메소드이다.

 

export default {      data () {           return {                 message: { text: 'Hello World!' }           }      },      mounted () {           // author 속성을 추가해도 Vue는 message 객체가 변화한 것을 알지 못한다.           message.author = 'John'             // text 속성을 삭제해도 Vue는 message 객체가 변화한 것을 알지 못한다.           delete message.text      } }

우리는 $set, $delete 메소드를 사용함으로써 Vue에게 "지금 추가하거나 삭제하는 속성으로 인해 객체가 갱신되었습니다" 라고 알려줄 수 있다.

vm.$set( 속성을 추가할 객체, 추가할 속성의 키, 추가할 속성의 값 ) vm.$delete( 속성을 제거할 객체, 제거할 속성의 키 )

export default {      data () {           return {                 message: { text: 'Hello World!' }           }      },      mounted () {           this.$set( this.message, 'author', 'John );           this.$delete( this.message, 'text' );      } }

 

6. vm.$emit

$emit 트리거는 인자로 주어진 이벤트를 트리거링한다. 이때 이벤트명은 자유롭게 정할 수 있으며 두 번째 인자는 이벤트 리스너의 콜백 함수의 인자로 전달된다.

vm.$emit( 이벤트 이름, 이벤트 리스너 콜백 함수의 인자 )

<template>      <Foo @click="sayHi"/> </template> <script> export default {      name: 'Foo',      methods: {           onClick () {                this.$emit('click', {message: 'Hi'})           }      } } </script>

 

7. vm.$on, vm.$once, vm.$off

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

 

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

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

vm.$off() // 인자가 없으면 모든 이벤트 리스너를 제거한다. vm.$off('click') // click 이벤트의 모든 이벤트 리스너를 제거한다. vm.$off('click', sayHi) // click  이벤트 리스너 중 sayHi 콜백 함수를 이벤트 핸들러로 가진 리스너만 제거한다.

 

8. vm.$forceUpdate

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

 

9. vm.$nextTick

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