钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段。
对于执行顺序和什么时候执行，看上面图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。
new Vue({ el: "#app", data: { msg: "ok", time:null }, methods: { show() { console.log('你好') } }, beforeCreate() { // 这是第一个生命周期,表示实例没有被创建 console.log(this.msg); //返回undefined // this.show() 没有没有被创建出来, 报错 }, created() { // 第二个生命周期data和methods初始化成功 // 注意: 如果想调用methods中的方法，或者操作data,最早只能在created中调用 console.log(this.msg); //返回'ok' this.show() //返回 '你好' }, beforeMount() { // 第三个钩子 , 表示模板在内存中已编译好了, 只是没有渲染在页面中 console.log(document.getElementById("txt").innerHTML); //{{msg}} // 页面还没解析 }, mounted() { // 第四个钩子 , 表示内存中的模板已渲染在页面中 // 注意: 此时实例已经完全创建好了, 可以在当前钩子上操作js console.log(document.getElementById("txt").innerHTML); // ok this.time=setInterval(()=>{ console.log('ok'); },100) }, beforeUpdate() { // 第五个钩子, 表示界面还没更新,内存中的更新 console.log('界面上的' + document.getElementById("txt").innerHTML); //界面上的 ok console.log('内存上的' + this.msg); //界面上的 on }, updated() { // 第六个钩子, 表示界面和内存中的数据都更新 console.log('界面上的' + document.getElementById("txt").innerHTML); //界面上的 on console.log('内存上的' + this.msg); //界面上的 on }, beforeDestroy() { // 第七个钩子, 表示销毁前 console.log(); clearInterval(this.time) }, destroyed() { // 第七个钩子, 表示销毁后 }, // 通过vue.$destroy() 进行销毁, 销毁过后, 内存中的数据已经控制不了界面了, 属于内部销毁 // 应用场景:计时器, 第三方实例, 点击提交跳转之前销毁之前的数据 }) /* 总结: 1. 如果想调用methods中的方法，或者操作data,最早只能在created中调用; 2. 针对于某一个DOM来操作js, 最早在mounted中调用; 3. 如果更新数据,最早在mounted中调用; 4. 关于销毁,通过vue.$destroy() 进行销毁, 销毁过后, 内存中的数据已经控制不了界面了, */
