生命周期是指Vue实例或者组件从诞生到消亡经历的每一个阶段，在这些阶段的前后可以设置一些函数当做事件来调用。
分为四个阶段
1.实例创建前后
beforeCreate=> 鸡肋函数， 很少用。 created => 加载数据 。此时this，拥有了该有的东西。 this.$refs获取不到DOM
2.页面渲染前后
beforeMount => 渲染前执行 this.$refs获取不到DOM mounted => 渲染完成 =>可以获取dom对象。 this.$refs可以获取到DOM
3.数据更新前后 beforeUpdate => 鸡肋函数 updated => 鸡肋函数 。当很多数据更新时，使用此函数会浪费资源。可以用 watch 检测 data中某个数据的变化。
4.组件销毁前后 beforeDestoty => 可以用来销毁之前定义的定时器 destoryed => 鸡肋函数
下面写一段代码来演示一下
<template> <div> 生命周期及其钩子函数 <p>{{name}}</p> <input type="text" v-model="name" /> <p>{{age}}</p> <input type="text" v-model="age" /> </div> </template> <script> export default { data() { return { name: "小明", age: 12 }; }, beforeCreate() { console.log("实例创建前执行beforeCreate"); }, created() { console.log("实例创建后执行created"); }, beforeMount() { console.log("页面渲染前执行beforeMount"); }, mounted() { console.log("页面渲染后执行mounted"); }, beforeUpdate() { console.log("数据更新前触发执行beforeUpdate"); }, updated() { console.log("数据更新后触发执行updated"); }, beforeDestroy() { console.log("组件销毁前触发beforeDestroy"); }, destroyed() { console.log("组件销毁后触发destroyed"); } }; </script> <style> </style>