一、為什么要理解生命周期？

????理解生命周期就像是知道了一部電影的劇情走向，能讓你在適當的時機做出反應。Vue 生命周期的鉤子讓你可以在不同的階段插入你的邏輯，像是提前準備、后期清理或者在數據更新時做點事情。這種“精確控制”的能力會讓你在開發過程中更加得心應手，避免做出一些不必要的錯誤。

二. Vue 的四個階段和八個生命周期鉤子函數

<template><div id="app"><p id="box">{{msg}}</p><button @click="change">更新</button></div>
</template><script>
export default {data () {return {msg: 'hello'}},methods: {change () {this.msg = 'hello world'}},beforeCreate () {console.log('---------------->beforeCreate')console.log(this.msg, document.getElementById('box'))},created () {console.log('---------------->created')console.log(this.msg, document.getElementById('box'))},beforeMount () {console.log('---------------->beforeMount')console.log(this.msg, document.getElementById('box'))},mounted () {console.log('---------------->mounted')console.log(this.msg, document.getElementById('box'))},beforeUpdate () {console.log('---------------->beforeUpdate')console.log(this.$el.innerHTML)console.log(this.msg, document.getElementById('box'))},updated () {console.log('---------------->updated')console.log(this.$el.innerHTML)console.log(this.msg, document.getElementById('box'))}
}
</script>