Vue μΈμ€ν΄μ€λ μ»΄ν¬λνΈκ° μμ±λ λ κ±°μΉκ² λλ κ³Όμ
μΈμ€ν΄μ€κ° μμ±λ ν μ°λ¦¬ λμ 보μ¬μ§κ³ , μ¬λΌμ§κΈ°κΉμ§μ λ¨κ³
1. μμ± create
2. DOMμ λΆμ°© mount
<template>
μ¬μ΄μ μλ κ²μ HTMLλ‘ λ°κΏμ£Όκ³ μ»΄ν¬λνΈ μμ± λ¨κ³μμ index.htmlμ λΆμ°©νλ€3. μ λ°μ΄νΈ update
4. μμ΄μ§λ€! destroy
λΌμ΄νμ¬μ΄ν΄ λ¨κ³λ§λ€ μ€νλ μ μλ ν¨μμ κ°μ λΌμ΄νμ¬μ΄ν΄ ν
Hookμ κ±Έμ΄μ λΌμ΄νμ¬μ΄ν΄ μ€κ°μ μνλ μ½λλ₯Ό μ€ν κ°λ₯νλ€
<script>
λΆλΆμ μμ±νλ©΄ λλ€ beforeCreate
, created
, beforeMount
, mounted
, beforeUpdate
(), updated
, beforeUnmount
, unmounted
-> ν΄λΌμ΄μΈνΈ&μλ² λ λλ§ κ³Όμ λͺ¨λμμ μ»΄ν¬λνΈ μ€μ ν νμ μλ€λ©΄ μ¬κΈ°μ μ²λ¦¬
export default{
data() {
return {
msg: 'hello';
}
},
beforeCreate(){
console.log(this.msg); // undefined! μ κ·Ό λΆκ°
}
}
ν νλ¦Ώ λ° κ°μ DOM λΆμ°© μ μ μ€ν!
data, event νμ±νλμ΄ μ κ·Ό κ°λ₯
λ°μ΄ν° μ΄κΈ°νμμ μ¬μ©
λΆλͺ¨ > μμ μμΌλ‘ created ν μ€ν
-> μ΄κΈ° λ λλ§ μ§μ . μ§νμ DOM μ κ·Όνκ±°λ μμ ν λ μ¬μ©
export default{
beforeMount(){
console.log('beforeMount'); // undefined! μ κ·Ό λΆκ°
}
}
-> μ»΄ν¬λνΈκ° λ€μ λ λλ§λλ μκΈ°λ₯Ό μμμΌ νλ κ²½μ°μ μ¬μ©
export default {
data() {
return {
counter: 0
}
},
created() {
setInterval(() => {
this.counter++
}, 1000)
},
beforeUpdate() {
console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
// Logs the counter value every second, before the DOM updates.
console.log(this.counter)
}
}
export default {
beforeDestroy() {
console.log('beforeDestory');
}
}
Reference β
https://vuejs.org/guide/essentials/lifecycle.html