Vue.js Instance

Inseok Park·2022년 6월 15일
0

Instance

인스턴스 소개

// 인스턴스는 아래와 같이 생성
new Vue();

// 변수에 할당 가능하다.
const vm = new Vue({
  el: '#app',
  data: {
    message: 'hi'
  }
});});

console에 위에서 할당한 vm을 입력하면
인스턴스 내에 어떤 속성과 API가 있는지 확인 가능하다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- ... -->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hi'
      }
    });
  </script>
</body>
</html>

인스턴스와 생성자 함수

일반적인 자바스크립트 생성자 함수

함수를 이용해서 어떤 정보를 담은 객체를 생성하는것이
생성자 함수의 기본적인 객체생성 패턴이다.

Vue.js에서 생성자함수 new Vue() 를 쓰는 이유


위와 같이 vm 내에서
매번 함수를 정의하는것이 아니라 미리 정의된 함수를 사용할 수 있다.
따라서 Vue는 생성자함수로 Vue에서 api나 속성들을 정의해놓고
갖다쓰거나 재사용하는 구조를 가지고 있다.

MDN 생성자 함수 설명 문서

인스턴스 옵션 속성

// key : value, 형태
new Vue({
  el: ,
  template: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
})

options

const options = {
  el: '#app',
  data: {
    message: 'hi'
  }
}
const vm = new Vue(options);

위의 옵션 표기와 결과는 같다.
Vue 공식문서에서 나오는 코드나 가독성은 아래의 객체리터럴 방식이 더 좋다.

const vm = new Vue({
  el: '#app',
  data: {
    message: 'hi'
  }
});

0개의 댓글