[Vue.js] 01 Instance

Vue는 무엇인가?

• 웹 애플리케이션 제작을 쉽게 하도록 도와주는 JavaScript 프레임워크
• 사용자 인터페이스를 만들기 위한 진보적인 프레임워크
• 타 프레임워크와 가장 큰 차별점은 바로 단일 파일 컴포넌트(SFC)
  • 기존 방식은 HTML, JS, CSS 각각 별도의 파일로 관리하게 되기 때문에 코드 유지 보수 및 수정이 엄청나게 번거롭다.
  • 전역 정의모든 구성 요소에 대해 고유한 이름을 지정하도록 강요됨.
  • 문자열 템플릿 구문 강조가 약해 여러 줄로 된 HTML에 보기 안좋은 슬래시가 많이 필요.

기존 자바스크립트

<div id="app"></div>


<script>
  let div = document.querySelector("#app");
  let viewModel = {};

  (function() {
    function init() {
      //객체의 동작을 재정의하는 함수
      Object.defineProperty(viewModel, 'str', {
        // 속성의 접근했을 떄의 동작을 정의
        get: function () {
            console.log('접근');
        },
        // 속성에 값을 할당했을 때의 동작을 정의
        set: function (newValue) {
            console.log('할당', newValue);
            render(newValue);
        }
      });
    }

    function render(value) {
      div.innerHTML = value;
    }

    init();
  })();
</script>

Vue 로 전환

<div id="app">
  {{ message }}
</div>

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

인스턴스

• Vue 인스턴스란 생성된 Vue 오브젝트 하나
• Vue 앱을 시작하기 위해 필수적이며, 앱의 진입점이 됨
• 간단한 템플릿 렌더링부터 데이터 바인딩, 컴포넌트 등 많은 동작 수행

인스턴스 속성

• Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용
• Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성

new Vue({
    el: '',
    template: '',
    data: {},
    methods: {},
    created: {},
    watch: {},
});

• el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그)
• template : 화면에 표시할 요소(HTML, CSS 등)
• data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성
• methods : 화면에 동작과 이벤트 로직을 제어하는 메서드
• created : 뷰의 라이프 사이클과 관련된 속성
• watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

위 속성이나 콜백에 화살표 함수 사용은 지양한다. 화살표 함수는 부모 컨텍스트에 바인딩되기 때문에, this 컨텍스트가 호출하는 Vue 인스턴스에서 사용할 경우 `Uncaught TypeError: Cannot read property of undefined` 또는 `Uncaught TypeError: this.myMethod is not a function`와 같은 오류가 발생하게 된다.

 

데이터와 메소드

• Vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가된다.
• 각 속성값이 변경될 때 뷰가 “반응”하여 새로운 값과 일치하도록 업데이트 된다.
• data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이라는 것.
• Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공하는데 다른 사용자 정의 속성과 구분하기 위해 $ 접두어를 붙였다.

var vm = new Vue({
 el: '#app',
 data: { num: 10 }
})

vm.$data; // {__ob__: Observer...}
vm.$el; // <div id="app">...</div>
...

인스턴스 Lifecycle

• 라이프사이클이란 Vue 인스턴스의 create부터 destroy까지의 일련의 과정
• Create > Mount > Update > Destory
• 사용자는 Vue 인스턴스를 생성할 때 전달해던 Option을 통해 라이프사이클 훅을 정의할 수 있음

 

추가 사항

Prototype

사용하는 이유

• 객체마다 생성되는 prototype 라는 빈 객체가 어딘가에 존재하게되고 이를 공유할 수 있다.
• this 사용

// this를 사용
function Toy(name){
  this.name = name;
  this.battery = 100;
  this.charge = function(){
    battery += 10;
    console.log(`charging is finished. battery is ${this.battery}`)
  }
}

const woody = new Toy('woody');
const buzz = new Toy('buzz');

• prototype 사용

// prototype 사용
function Toy(name){
  this.name = name;
  this.battery = 100;
}

Toy.prototype.charge = function(){
  battery += 10;
  console.log(`charging is finished. battery is ${this.battery}`
)}

const woody = new Toy('woody');
const buzz = new Toy('buzz');

prototype object

• 함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object도 같이 생성이 된다.
• Prototype Object는 기본속성으로 constructor와 __proto__를 가지고 있다.
  • constructor : 생성자로써, 자신을 만들어낸 객체와 연결된 속성
  • __proto__ : 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype를 가리킨다
  • prototype : 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다. (함수만 가지고 있다)

Prototype link

• 자바스크립트 객체는 Prototype이라는 내부 프로퍼티가 존재한다.
• 거의 모든 객체가 생성 시점에 이 프로퍼티에 null이 아닌 값이 할당된다.

const woody = {
  riding:true
}
console.log(woody.riding) // true

Prototype chain

• 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색

function Ultra(){} Ultra.prototype.ultraProp = true;

function Super(){}  
Super.prototype = new Ultra();

function Sub(){}  
Sub.prototype = new Super();

var o = new Sub();  
console.log(o.ultraProp);

즉시 실행 함수 (Immediately-invoked function expression)

• 정의 되자마자 즉시 실행되는 함수를 말한다.

(function () {  
statements  
})();

• 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있다.
• 내부안으로 다른 변수들이 접근하는 것을 막을 수 있다.
• 흔히 한 번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용된다.

 

(function () { 
	var aName = "Barry"; 
})();

// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName // throws "Uncaught ReferenceError: aName is not defined"