一、生命周期图示

在这里插入图片描述

二、常见的生命周期函数

常见的生命周期函数	执行的时间
beforeCreate	Vue初始化
created	Vue初始化
beforeMount	模板未渲染到页面上
mounted	模板已经渲染到页面上
beforeDestroy	只有Vue实例销毁的时候或者调用vm.$destroy()这个方法
destroyed	只有Vue实例销毁的时候或者调用vm.$destroy()这个方法
beforeUpdate	数据发生变化时，先触发beforeUpdate
updated	数据发生变化时，再触发updated
温馨提示	生命周期函数，直接卸载Vue实例中，不写在methods中

三、生命周期函数执行场景

刷新页面，会依次触发以下函数
在这里插入图片描述
Vue销毁时，会依次触发以下函数

当数据发生改变时，会依次触发以下函数

四、测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue实例生命周期函数</title><!--引入vue.js库--><script src="../vue.js"></script>
</head><body>
<div id="root"></div><script>/*生命周期函数就是vue实例在某一个是点会自动执行的函数*/var vm = new Vue({el: '#root',template: "<div>{{content}}</div>",data: {content: 'hello world'},beforeCreate: function () {console.log("beforeCreate");},created: function () {console.log("created");},beforeMount: function () {console.log("beforeMount");/*模板未渲染到页面上*/console.log(this.$el);},mounted: function () {console.log("mounted");/*模板已经渲染到页面上*/console.log(this.$el);},beforeDestroy: function () {console.log("beforeDestroy");},destroyed: function () {console.log("destroyed");},beforeUpdate: function () {console.log(this.$data);console.log("beforeUpdate");},updated: function () {console.log(this.$data);console.log("updated");}});
</script>
</body>
</html>