6.Vue生命週期
6.1 生命週期
6.1.1 生命週期圖示
從圖中可以看出，一個元件從被建立到最後被銷燬，總共要經歷8個過程：
- beforeCreate：例項建立前
- created：例項建立完畢
- beforeMount：DOM掛載前
- mounted：DOM掛載完畢
- beforeUpdate：資料更新前
- unpdated：資料更新完畢
- beforeUnmount：解除DOM掛載前
- unmounted：解除DOM掛載完畢
6.1.2 程式碼演示
<body>
<div id="app">
<mycomponent v-if="isShow"></mycomponent>
<button @click="change">{{ msg }}</button>
</div>
<script src="../js/vue3.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
isShow: true,
msg: '隱藏'
}
},
methods: {
change() {
this.isShow = !this.isShow
this.msg = this.isShow ? '隱藏' : '顯示'
}
}
})
app.component('mycomponent', {
template: `<div>
{{ num }} <button @click="add">加</button>
</div>`,
data() {
return {
num: 0
}
},
methods: {
add() {
this.num++
}
},
beforeCreate() {
console.log('beforeCreate - Vue例項建立前的生命週期函式')
},
created() {
console.log('created - Vue例項建立後的生命週期函式')
},
beforeMount() {
console.log('beforeMount - Vue例項掛載DOM前的生命週期函式')
},
mounted() {
console.log('mounted - Vue例項掛載DOM後的生命週期函式')
},
beforeUpdate() {
console.log('beforeUpdate - 資料更新前的生命週期函式')
},
updated() {
console.log('updated - 資料更新後的生命週期函式')
},
beforeUnmount() {
console.log('beforeUnmount - Vue例項解除安裝前的生命週期函式')
},
unmounted() {
console.log('unmounted - Vue例項解除安裝後的生命週期函式')
}
})
app.mount('#app')
</script>
</body>
6.2 在Vue中操作DOM
<body>
<div id="app">
<mycomponent v-if="isShow"></mycomponent>
<button @click="change">{{ msg }}</button>
</div>
<script src="../js/vue3.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
isShow: true,
msg: '隱藏'
}
},
methods: {
change() {
this.isShow = !this.isShow
this.msg = this.isShow ? '隱藏' : '顯示'
}
}
})
app.component('mycomponent', {
template: `<div>
{{ num }} <button @click="add" ref="btn">加</button>
</div>`,
// ref="btn" 引用，用於獲取按鈕元素
data() {
return {
num: 0
}
},
methods: {
add() {
this.num++
}
},
beforeCreate() {
console.log('beforeCreate - Vue例項建立前的生命週期函式')
},
created() {
console.log('created - Vue例項建立後的生命週期函式')
},
beforeMount() {
console.log('beforeMount - Vue例項掛載DOM前的生命週期函式')
},
mounted() {
let domObj = this.$refs.btn
// console.log(domObj)
domObj.style.color = 'skyblue'
console.log('mounted - Vue例項掛載DOM後的生命週期函式')
},
beforeUpdate() {
console.log('beforeUpdate - 資料更新前的生命週期函式')
},
updated() {
console.log('updated - 資料更新後的生命週期函式')
},
beforeUnmount() {
console.log('beforeUnmount - Vue例項解除安裝前的生命週期函式')
},
unmounted() {
console.log('unmounted - Vue例項解除安裝後的生命週期函式')
}
})
app.mount('#app')
</script>
</body>