LifeCycle 이해 - plgrim-hannah/vue-study GitHub Wiki

# 1. 라이프 사이클 흐름

  • Created : data, method 활성화

  • Mounted : 컴포넌트 초기 렌더링 및 DOM 노드 생성이 완료( = SFC 구조에서 템플릿 부분이 그려진 후에 코드 실행)

    화면 요소를 제어하는 로직 수행하기 좋은 단계로 UserInterface를 컨트롤 하는 부분임

  • Updated : 컴포넌트 데이터가 변경되어 DOM이 렌더링 된 후에 실행됨. 또한 property가 변경된 후에 DOM에 접근할 때 사용함

# 2. 라이프 사이클 순서도

```
<template>
  <div>
    {{ count }}
  </div>
  <h1>Vue.js LifeCyle Test</h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  beforeCreate() {
    console.log("LifeCyle is beforeCreate", this.count);
    this.test();
  },
  created() {
    console.log("LifeCyle is Created", this.count);
    this.test();
  },
  beforeMount() {
    console.log("LifeCyle is beforeMount", document.querySelector("h1"));
  },
  mounted() {
    console.log("LifeCyle is mounted", document.querySelector("h1"));
  },
  methods: {
    test() {
      console.log("함수 호출!!!!!!!");
    },
 },
};
</script>

<style lang="scss" scoped></style>
```

2.1. beforeCreated(), created()에서 data 호출

->created에 data, method가 활성 되므로 beforeCrated() undefined 발생함

2.2. beforeCreate() 에서 methods 호출

->created에 data, method가 활성 되므로 그전에 호출하려고 하면 오류 발생함

2.3. beforeMount(), mounted()에서 html 요소 찾기

=> mounted 단계에서 컴포넌트 초기 렌더링 및 DOM 노드 생성이 완료되기 때문에 beforeMount()에서는 요소를 찾을 수 없다.

⚠️ **GitHub.com Fallback** ⚠️