示例图
home代码
<template> <!-- 所有的内容要被根节点包含起来 --> <div id="life"> 生命周期函数的演示 ---{{msg}} <br> <button @click="setMsg()">执行方法改变msg</button> </div> </template> <script> /* 生命周期函数/生命周期钩子: 组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数 */ export default { data() { return { msg: "msg" }; }, methods: { setMsg() { this.msg = "我是改变后的数据"; } }, beforeCreate() { console.log("实例刚刚被创建1"); }, created() { console.log("实例已经创建完成2"); }, beforeMount() { console.log("模板编译之前3"); }, mounted() { /*请求数据,操作dom , 放在这个里面 mounted*/ console.log("模板编译完成4"); }, beforeUpdate() { console.log("数据更新之前"); }, updated() { console.log("数据更新完毕"); }, beforeDestroy() { /*页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数*/ console.log("实例销毁之前"); }, destroyed() { console.log("实例销毁完成"); } }; </script>
app代码
<template> <div id="app"> <v-home v-if="flag"></v-home> <button @click="clickBtn">组件挂载/销毁</button> </div> </template> <script> import Home from './components/Home'; export default { name: "app", data() { return { flag:true }; }, components: { 'v-home':Home }, methods:{ clickBtn() { this.flag = this.flag?false:true; } } }; </script> <style> </style>
效果:
总结:比较常用的
mounted:用于请求接口渲染数据时候
beforeDestroy:用于页面销毁时,保存页面里的某些数据时候