입문

라이프 사이클 연결은 Vue에서 선택할 수 있는 객체 중 하나입니다.Vue 인스턴스의 생성에서 폐기 사이의 특정 시간에 실행되는 방법(함수)입니다ライフサイクルフック각 구성 요소에는 라이프 사이클 연결이 있습니다.

주기 후크 목록

데이터 옵션과 methods 옵션은 자유롭게 정의할 수 있지만 생명주기 연결은 사용할 수 있는 방법을 미리 결정하고 아래의 정시 실행 방법을 결정합니다.
라이프 사이클 연결
타이밍
beforeCreate
인스턴스를 생성할 때데이터를 다시 활성화하기 전에
created
인스턴스가 생성된 후데이터가 생성된 후 다시 활성화합니다.
beforeMount
인스턴스를 DOM(HTML)으로 마운트하기 전에DOM을 조작할 수 없습니다.
mounted
인스턴스가 DOM(HTML)에 로드된 후DOM을 조작할 수 있습니다.
beforeUpdate
데이터와 DOM을 업데이트하기 전에
updated
데이터 업데이트 및 DOM 업데이트 후
beforeDestroy
인스턴스가 제거되기 전에
destroyed
인스턴스가 제거된 후
errorCaptured
후대 구성 요소에서 오류를 포착할 때.
※ 리액터/옵션에 정의된 데이터입니다.정의된 데이터가 업데이트되면 HTML 측면도 자동으로 업데이트됩니다.변경된 데이터를 순간적으로 반영합니다.

기본 기법

sample.js

new Vue({
  el: 'app',
  ライフサイクルのメソッド名: function() {
    ここに処理をかく
  } 
})

beforeCreate

sample.js

new Vue({
  el: 'app',
  data: {
    message: 'Hello',
  },
  // インスタンスが生成され、処理が実行される
  beforeCreate: function() {
    // リアクティブデータはまだ生成されていないのでmessageは参照できない
    // コンソールには何も出力されない
    console.log(this.message)
  }
})

created

sample.js

new Vue({
  el: 'app',
  data: {
    message: 'Hello',
  },
  // インスタンスが生成された後、処理が実行される
  created: function() {
    // コンソールにHelloと出力される
    console.log(this.message)
  }
})

beforeMount

sample.vue

<template>
  <!-- まだマウントされていないのでmessageの中は空のまま -->
  <div id="app">{{ message }}</div>
</template>
<script>
new Vue({
  el: 'app',
  data: {
    message: '',
  },
  // マウントされる前に処理が実行される
  beforeMount: function() {
    // messageにHelloを代入
    this.message = 'Hello'
  }
})
</script>

mounted

sample.vue

<template>
  <!-- Helloが表示される -->
  <div id="app">{{ message }}</div>
</template>
<script>
new Vue({
  el: 'app',
  data: {
    message: '',
  },
  // マウントされた後に処理が実行される
  mounted: function() {
    // messageにHelloを代入
    this.message = 'Hello'
  }
})
</script>

생명주기의 흐름과 방법이 실행될 시기를 나타내는 그림↓