Vue 인스턴스 정리 (Vue.js 2, Vue.js 3)

Vue.js 2, Vue.js 3에서 인스턴스를 생성하기 위한 방법이 다르게 되어있다.

Vue에서 인스턴스란?

- Vue 인스턴스는 기본적으로 Vue 함수로 생성된 객체를 의미한다.

- 이 객체는 Vue.js의 주요기능을 담고 있으며, 웹 애플리케이션을 개발하는데 필요한 메서드와 속성들을 제공하고 있다.

* 여기서 리액트와 다른점을 볼 수 있었다. 리액트는 어떻게 보면 컴포넌트를 통해서 인스턴스를 생성하고 초기 상태를 지정하게 된다. 뷰는 Vue.js 2에서는 new Vue, Vue.js 3에서는 createApp()을 통해서 인스턴스를 생성하게 된다.

 

- 애플리케이션의 시작점이며 data, computed, methods, lifeCycle ... 등을 포함하게 된다.

- Vue 인스턴스를 생성하게 되면 상태를 관리하고, DOM을 업데이트 하는 역할을 담당하게 된다.

- 객체로 관리되며 데이터 및 렌더링을 담당하게 된다.

---

 

VUE.js 2

new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue.js'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

- el에서는 DOM 요소를 지정하고 data 객체를 정의한다. computed, methods를 통해 함수를 정의한다.

 

VUE.js 3

const app = Vue.createApp({
  data() {
    return {
      message: '안녕하세요 Vue.js'
    }
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

app.mount('#app')

- el 프로퍼티 대신 mount메소드를 사용하여 체이닝을 통해서 특정 엘리먼트에 연결하게 된다.

 

 

 

 

간단하게 설명하자면 리액트에서 컴포넌트를 만드는것을 Vue에서는 이렇게 인스턴스롤 통해 해당 데이터를 연결하고 메소드를 통해서 사용할 함수를 정의해서 진행할 수 있다.