[Vue] - 라이프사이클

<template>
  <div>
    <h1>This is homepage</h1>
    <form action>
      <InputField v-model="name"></InputField>
      <br />
      <button @click.prevent="updateName">Submit</button>
    </form>
    {{ name }}
  </div>
</template>

<script>
import InputField from "@/components/InputField.vue";
export default {
  components: {
    InputField,
  },

  data() {
    return {
      name: "Seize Coder",
    };
  },

  beforeCreate() {
    console.log("beforeCreate", this.name);
  },
  created() {
    console.log("created", this.name); // 서버에 요청을 보낼 때 많이 사용,  서버에 요청을 보내서 응답을 받아온 데이터를 data 에 업데이트할 때 많이 사용
  },
  beforeMount() {
    alert("beforeMount"); // 마운트가 되기 전
  },
  mounted() {
    alert("mounted"); // 여기서부터 화면 접근이 가능해짐, 그래서 돔에 접근하고 싶으면 여기서 해주면 됨
  },
  beforeUpdate() {
    alert("before Update");
  },
  updated() {
    alert("updated");
  },
  beforeDestroy() {
    alert("before Destroy"); // 메모리 누수를 방지하기 위해 이벤트를 삭제 해주고나 데이터를초기화 해주는 것들을 한다.
  },
  destroyed() {
    alert("destroyed");
  },

  methods: {
    updateName() {
      this.name = "hello";
    },
  },
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>