Vue3 #1

서론

Next.js 공부를 하면서 Vue에 대해서도 막연하게 궁금하긴 했지만 Next와 다른 공부를 하면서 하기에는 벅차서 Next 클론코딩을 몇가지 만들어보고 Vue에 대해서 공부하려고 합니다!!

 

본론

인스턴스 생성

##HTML
<script src="https://unpkg.com/vue@3"></script>

<div id="app">
  {{message}}
  <h1>
    {{count}}
    <button @click="Increment">+1</button>
  </h1>
</div>

##Vue
const {createApp} = Vue;

createApp({
  data(){
    return {
      message: "안녕하세요",
      count: 0
    }
  },
  methods: {
    Increment(){
      this.count++
    }
  }
}).mount("#app")

 

생명주기

const {createApp} = Vue;

createApp({
  data(){
    return {
      message: "안녕하세요",
      count: 0
    }
  },
  methods: {
    Increment(){
      this.count++
    }
  },
  beforeCreate(){
    // 인스턴스가 생성되기 전이라 "undefined"로 출력
    console.log("this.message")
  },
  created(){
    // 인스턴스가 생성된 직후라 "안녕하세요" 출력
    console.log("this.message")
  },
  beforeMount(){
    // 마운트가 생성되기 전이라 DOM구조에 접근 불가능 "null"로 출력
    console.log(document.querySelector("#input")
  },
  mounted(){
  // 초기 렌더링이 끝난 직후 mount가 되어서 DOM구조에 접근 가능
    console.log(document.querySelector("#input")
  }
  
  beforeUpdate(){
  // 리렌더링 되기 전, 업데이트가 되기 전의 값이 출력
  }
  updated(){
  // 리렌더링 된 후, 업데이트가 되고 나서의 값이 출력
  }
}).mount("#app")

 

정리

정말 생각보다 쉽고 리액트와 정말 비슷한 생명주기를 갖고 있지만 vue는 정말 새새하게 컨트롤이 가능합니다.