Vue 라이프 사이클

왼쪽 저것들을 훅이라고 한다.

우리가 볼 것은 created 부터

그 다음 볼 것은 mounted

 

컴포넌트를 불러오면 created 해서 생성하고, 

초기 랜더링 한번 한 이후 mounted

 

그러니까 mounted 이후 저 리렌더링 및 패치가 자바스크립트의 이벤트 루프 같은 느낌인 듯?

계속해서 리마운트, 즉 리랜터링

저 리랜더링 될 때의 조건이 여러가지 있는데

인스턴스를 DOM에 마운트 하는 경우, Date() 등의 데이터가 변경된 경우, 템플릿을 컴파일 한 경우, 데이터 관찰설정이 필요한 경우.. 등

이 외에도 조건이 많을 듯 한데,

 

그냥 뭔가 뷰에 보여질 것이 바뀌면 리랜더링 된다고 생각하면 될 듯.

 

일단 created는 우리가 신경쓸 수 있는 것 중 위의 라이프사이클에서 컴포넌트 연결 직 후 가장 빠르게 실행되는 거라고 인식하면 되고 (그 이전 setup, beforeCreate는 그냥 알고 있기만 하면 됨.)

 

mounted 이후 부분은 그냥 이벤트 루프라고 생각하면 됨.

 

 

<script>

  export default{

    created(){

      console.log('created', this.count);

    },

    mounted(){

      console.log('mounted');

      console.log(document.querySelector('h1'));

    },

    beforeCreate(){

      console.log('beforCreate',this.count);

    },

    beforeMount(){

      console.log('beforeMound');

      console.log(document.querySelector('h1'));

    },

    updated(){

      console.log('updated')

    },

    components:{

      FruitItems

    },

    data() {

      return {

        count : 3,

      }

    }

  }

</script>

beforeCreate()에서는 생성되기 전이라 data()의 count를 읽지 못한다.

beforMount() 는 랜더링 되기 전 이라 태그를 못 읽는다.

updated()는 데이터 변경 시, 일어난다. 예를 들어 버튼을 누르면 값이 바뀐다던지, 그럴 때.

 

 

대충 보니 create() 할 때 init작업,

mount()는 저 때가 문서를 읽은 후 이니 문서태그들과 관련된 작업 할 수 있을 듯.

 

data()같은 건 created 단계 이전에 읽혀지고, (이런 것들 다 읽혀지고 나야 create() 완료.)

문서는 mount() 이전에