개발자/Vue

<수정필요>[Vue] Vue 인스턴스, this 바인딩에 관해서!

GoGo개발 2023. 2. 14. 10:49
vue 인스턴스란?

 

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

각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 데이터가 변경되어 DOM을 업데이트하는 경우가 있다고 가정 하면, 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클의 훅 도 호출 된다.

예를 들어, 인스턴스가 생성된 이후 created 가 호출 된다.

 

vue 인스턴스 라이프 사이클

 

 

 

 

 

 

참고블로그

https://velog.io/@ducks1077/Vue.js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4%EB%9E%80 

 

Vue.js 인스턴스란?

인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드입니다.모든 vue 앱은 vue 함수로 새 vue 인스턴스를 만드는 것부터가 시작입니다.변수 vm을 인스턴스로 선언한것이죠.이제 이렇게 선언한 후

velog.io

 

 

 

 

this 바인딩

 

this는 상황에 따라 다르게 바인딩 된다. 예를들면
1.전역 공간의 this : 전역 객체
2.  메소드 호출 시 메소드 내부의 this : 해당 메소드를 호출한 객체
3.함수 호출 시 함수 내부의 this : 지정되지 않음(❓❗️ )

( 함수를 호출했을 때 그 함수 내부의 this는 지정되지 않습니다.
 그리고 this가 지정되지 않은 경우, this는 자동으로 전역 객체를 바라보기 때문에  함수를 호출하면 함수 내부에서의 this는 전역 객체 가 된다고 정리할 수 있습니다)

 

https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90vuejs-v-for-%EB%A6%AC%EC%8A%A4%ED%8A%B8-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B0%98%EB%B3%B5%EB%AC%B8-83501d7a635a

 

[맨땅에VueJS] v-for, 리스트 렌더링 / 반복문

복잡한 웹을 만들다보면 정말 자주 마주치게 되는 상황이 있습니다. 게시판의 게시글 리스트를 보여줘야하는 상황처럼 목록이나 리스트와 같이 비슷한 내용을 반복적으로 보여줘야하는 경우가

medium.com

 

https://velog.io/@chlrbtlr30/Vue.js-%EB%82%B4%EB%B6%80-this-%ED%82%A4%EC%9B%8C%EB%93%9C

 

Vue.js 내부 this 키워드

Vue 내부 this 키워드

velog.io