Vue 인스턴스

1. Vue란?
2. Vue 인스턴스
3. Vue 컴포넌트
4. Vue 프로젝트 생성해보기 (이제 스프링을 곁들인...)
5. Axios
6. Router

이전 글
https://my-trash-code.tistory.com/31

Vue.js란?

 

2. Vue 인스턴스

 

개념

Vue 인스턴스는 생선된 Vue 오브젝트라고 생각하면 된다.

자바에서 객체를 실체화 하면 인스턴스라고 부르듯이...

앱의 진입점이 되며 템플릿 렌더링 부터 데이터 바인딩, 컴포넌트 등 많은 동작이 수행된다.

사용방법

<script>

      var data = {a:1}
      
      var vm = new Vue({
        data : data
      })
      console.log(vm.a === data.a)
      
      console.log(data.a)
      vm.a = 2
      console.log(data.a)
      
      vm.b = 'hi'
      
      console.log(vm.b)
      
      vm.b = 'go'
      
      console.log(vm.b)
      
</script>

   new Vue 부분이 Vue 인스턴스이다.

 

라이프 싸이클

이 라이프 사이클을 알면 언제 어떻게 어떤 일이 일어나는지 알 수 있고 그것을 활용해서 다양한 기능을 구현할 수 있다.

Vue 실행되면서 인스턴스가 생성되고 인스턴스가 생성과 소멸 그 사이에 위와 같은 흐름의 싸이클이 있다. 아래의 내용은 라이프 사이클을 구현한 것이다.

<!-- 라이프 사이클  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
          el:"#app",
          data:{
            message : "hellow vue!"
          },
          beforeCreate: function(){
            console.log("beforeCreate")
          },
          created:function(){
            console.log("created")
          },
          mounted:function(){
            console.log("mounted")
            // this.message = "HAHA"
          },
          updated:function(){
            console.log("updated")
          }
        })

    </script>

여기서 그냥 이대로 실행 시키면 console창에서는 updated가 제외된 상태로 나오게 된다. 왜냐하면 화면에 렌더링 된 후에 바인딩 된 데이터의 값이 바뀌지 않아서 updated가 일어나지 않는 것이다.

 

하지만 저기 주석 처리 되있는 부분을 주석을 지우고 실행시키면 updated가 실행된 것을 확인 할 수 있다.

라이프 사이클에 익숙해지면 적재적소에 사용하는 것이 가능해질 수 있다. 모두 노력하자.

 

그리고 라이프 사이클은 아니지만 computed 와 watch가 있다.

 

computed는 메소드 대신 쓰는데 계산이 필요한 데이터에 사용한다. 캐시 데이터 처럼 계산된 값을 가지고 있다가 필요할 때 다시 연산 할 필요 없이 바로 나온다.

 

watch는 해석하면 본다라는 의미로 되서 데이터가 변경되는것을 감시해서 watch안에 선언한 메서드들을 호출하는 기능을 한다.