我简单画了一下
每个vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板、渲染模板等等。vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当vue实列处于不同的生命周期时，对应的函数就会被触发调用。
示例 ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <span id="num">{{num}}</span> <button @click="num++">赞！</button> <h2>{{name}}，有{{num}}个人点赞</h2> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> let app = new Vue({ el: "#app", data: { name: "张三", num: 100 }, methods: { shows() { return this.name; }, }, beforeCreate() { console.log("=========beforeCreate============="); console.log("数据模型未加载：" + this.name, this.num); console.log("方法未加载：" + this.shows()); console.log("html模板未加载：" + document.getElementById("num")); }, created: function () { console.log("=========created============="); console.log("数据模型已加载：" + this.name, this.num); console.log("方法已加载：" + this.shows()); console.log("html模板已加载：" + document.getElementById("num")); console.log("html模板未渲染：" + document.getElementById("num").innerText); }, beforeMount() { console.log("=========beforeMount============="); console.log("html模板未渲染：" + document.getElementById("num").innerText); }, mounted() { console.log("=========mounted============="); console.log("html模板已渲染：" + document.getElementById("num").innerText); }, beforeUpdate() { console.log("=========beforeUpdate============="); console.log("数据模型已更新：" + this.num); console.log("html模板未更新：" + document.getElementById("num").innerText); }, updated() { console.log("=========updated============="); console.log("数据模型已更新：" + this.num); console.log("html模板已更新：" + document.getElementById("num").innerText); } }); </script> </body> </html>
