[Vue] Lifecycle Hooks, lodash

Lifecycle Hooks

• 각 vue 인스턴스를 생성될 때 일련의 초기화 단계를 거침
• 그 과정에서 사용자 정의 로직을 실행할 수 있는 Lifecycle Hooks 호출
• 특정 시점에서 동작을 수행할 경우 사용한다고 생각하자!
  • ex) vue인스턴스가 생성되자마자 수행할 작업이라면? created 사용

<!-- created를 사용하여 vue인스턴스가 생성되면 API 요청을 통해 데이터를 불러옴 -->
<div id="app">
  <img v-if="imgSrc" :src="imgSrc" alt="Image">
</div>
<script>
  const API_URL = 'https://~~~~~'

  const app = new Vue({
    el: '#app',
    data: {
      imgSrc: '',
    },
    methods: {
      getImg: function () {
        axios.get(API_URL)
          .then(res => {
            this.imgSrc = res.data.message
          })
      },
    },
    created: function () {
      this.getImg()
    },
  })
</script>

 

 

lodash library

• array, object 등 자료구조를 다룰 때 사용하는 유틸리티 함수 제공
• reverse, sortBy, range, random 등