生命周期函数代表的是`vue`实例、`vue`组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段、运行阶段及销毁阶段的函数。这些阶段的函数都是和methods同级的，不是写在methods中。
创建期间的函数：
1）beforeCreate：在创建实例前所执行的函数；Vue已经创建，但是data和methods都还没有创建好；
2）created：创建实例后所执行的函数；data和methods已经创建好，可以进行操作了。
3）beforeMount：模版经过编译，还没有加载到网页中。
4）mounted：模版经过编译，且加载到网页中。
运行阶段的函数：
1）beforeUpdate：在数据更新但是页面还有更新前所执行的函数；
2）update：在数据更新且页面的数据也更新后执行的函数。
销毁阶段的函数：
1）beforeDestroy：Vue实例或者是组件在被销毁之前执行的函数，在这个函数中Vue或者组件中的所有属性都是可以使用的。
2）destroyed：Vue实例或者组件被销毁后执行的。此时，Vue实例或者是组件上的所有东西都会解绑，所有事件都会移除，所有子元素都会被销毁。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue生命周期</title> </head> <body> <div id="app"> <p id="user">{{user}}</p> <input type="text" v-model=user> 学习销毁阶段 <hr>{{message}} <error-view :message="message" v-if="message"></error-view> <button @click="message=''">清除message</button> </div> <script> // 用于学习销毁阶段的函数 Vue.component("error-view", { props: ["message"], template: ` <p style="color:red">{{message}}ces</p> `, data() { return { hello: "你好" } }, beforeDestroy() { console.log("=========="); console.log("beforeDestory"); console.log(this.hello); }, destroyed() { console.log("=========="); console.log("destroyed"); console.log(this.hello); } }) new Vue({ el: "#app", data: { user: "知了", message: "错误信息" }, methods: { greet() { alert("hello word") }, }, beforeCreate() { console.log("-----------"); console.log("beforeCreate"); console.log(this.user); console.log(this.greet); }, created() { console.log("-----------") console.log("created") console.log(this.user) console.log(this.greet) }, beforeMount() { console.log("------------") console.log("beforeMount") console.log(document.getElementById("user").innerText); }, mounted() { console.log("-----------") console.log("mounted") console.log(document.getElementById("user").innerText); }, beforeUpdate() { console.log("============") console.log("beforeUpdate") console.log(this.user) console.log(document.getElementById("user").innerText); }, updated() { console.log("==============") console.log("update") console.log(this.user) console.log(document.getElementById("user").innerText) } }) </script> </body> </html>