Vue：vue组件生命周期

针对上图生命周期序号下表进行解释&＃xff1a;

1. new vue() : 这是new了一个vue的实例对象&＃xff1b;此时就会进入组件的创建过程。

2. Init Events & Lifecycle &＃xff1a;初始化组件的事件和生命周期函数&＃xff1b;当执行完这一步之后&＃xff0c;组件的生命周期函数就已经全部初始化好了&＃xff0c;等待着依次去调用。

3. beforeCreate &＃xff1a;官方说明&＃xff1a;在实例初始化之后&＃xff0c;数据观测(data observer) 和 event/watcher 事件配置之前被调用。

   解释&＃xff1a;这是第一个生命周期函数&＃xff1b;此时&＃xff0c;组件的data和methods以及页面DOM结构&＃xff0c;都还没有初始化&＃xff1b;所以此阶段&＃xff0c;什么都做不了。

4. Init injections & reactivity &＃xff1a;这个阶段中&＃xff0c;正在初始化data和methods中的数据以及方法。

5. created &＃xff1a;
   官方说明&＃xff1a;实例已经创建完成之后被调用。在这一步&＃xff0c;实例已完成以下的配置&＃xff1a;数据观测(data observer)&＃xff0c;属性和方法的运算&＃xff0c; watch/event 事件回调。然而&＃xff0c;挂载阶段还没开始&＃xff0c;$el 属性目前不可见。

   解释&＃xff1a;这个组件创建阶段第二个生命周期函数&＃xff0c;此时&＃xff0c;组件的data和methods已经可以用了&＃xff1b;但是页面还没有渲染出来&＃xff1b;在这个生命周期函数中&＃xff0c;我们经常会发起Ajax请求&＃xff1b;

6. 正在解析模板结构&＃xff0c;把data上的数据拿到&＃xff0c;并且解析执行模板结构汇总的指令&＃xff1b;当所有指令被解析完毕&＃xff0c;那么模板页面就被渲染到内存中了&＃xff1b;当模板编译完成&＃xff0c;我们的模板页面&＃xff0c;还没有挂载到页面上&＃xff0c;只是存在于内存中&＃xff0c;用户看不到页面&＃xff1b;

7. beforeMount :
   官方说明&＃xff1a;在挂载开始之前被调用&＃xff1a;相关的 render 函数首次被调用。

   解释&＃xff1a;当模板在内存中编译完成&＃xff0c;会立即执行实例创建阶段的第三个生命周期函数&＃xff0c;这个函数就是beforeMount&＃xff0c;此时内存中的模板结构&＃xff0c;还没有真正渲染到页面上&＃xff1b;此时&＃xff0c;页面上看不到真实的数据&＃xff0c;用户看到的只是一个模板页面而已&＃xff1b;

8. 这一步把正在内存中渲染好的模板结构替换到页面上&＃xff1b;

9. mounted &＃xff1a;
   官方说明&＃xff1a;el 被新创建的 vm.$ el 替换&＃xff0c;并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素&＃xff0c;当 mounted 被调用时 vm.$el 也在文档内。

   解释&＃xff1a;mounted是组件创建阶段最后的一个生命周期函数&＃xff1b;此时&＃xff0c;页面已经真正的渲染好了&＃xff0c;用户可以看到真实的页面数据了&＃xff1b;当这个生命周期函数执行完&＃xff0c;组件就离开了创建阶段&＃xff0c;进入到了运行中的阶段&＃xff1b;如果大家使用到一些第三方的UI插件&＃xff0c;而且这个插件还需要被初始化&＃xff0c;那么&＃xff0c;必须在mounted中来初始化插件&＃xff1b;

10. 组件运行汇总的生命周期函数&＃xff1b;组件运行中的生命周期函数&＃xff0c;会根据data数据的变化&＃xff0c;有选择性的被触发0次货N次&＃xff1b;

11. beforeUpdate &＃xff1a;
    官方说明&＃xff1a;数据更新时调用&＃xff0c;发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态&＃xff0c;这不会触发附加的重渲染过程。

    解释&＃xff1a;在执行beforeUpdate运行中的生命周期函数的时候&＃xff0c;数据肯定是最新的&＃xff1b;但是页面上呈现的数据还是旧的

12. 正在根据最新的data数据&＃xff0c;重新渲染内存中的的模板结构&＃xff1b;并把渲染好的模板结构替换到页面上

13. updated &＃xff1a;
    官方说明&＃xff1a;由于数据更改导致的虚拟 DOM 重新渲染和打补丁&＃xff0c;在这之后会调用该钩子。当这个钩子被调用时&＃xff0c;组件 DOM 已经更新&＃xff0c;所以你现在可以执行依赖于 DOM 的操作。
    解释&＃xff1a;页面也完成了更新&＃xff0c;此时&＃xff0c;data数据是最新的&＃xff0c;同时&＃xff0c;页面上呈现的数据也只最新的。

14. beforeDestroy &＃xff1a;
    官方说明&＃xff1a;实例销毁之前调用。在这一步&＃xff0c;实例仍然完全可用。
    解释&＃xff1a;当执行beforeDestroy的时候&＃xff0c;组件即将被销毁&＃xff0c;但是还没有真正开始销毁&＃xff0c;此时组件还是正常可用的&＃xff1b;data、methods等数据或方法&＃xff0c;依旧可以被正常访问

15. 销毁过程

16. destroyed &＃xff1a;
    官方说明&＃xff1a;vue 实例销毁后调用。调用后&＃xff0c;Vue 实例指示的所有东西都会解绑定&＃xff0c;所有的事件监听器会被移除&＃xff0c;所有的子实例也会被销毁。

    解释&＃xff1a;组件已完成了销毁&＃xff0c;组件无法使用&＃xff0c;data和methods都不可使用。

测试

<template><div><p v-text&＃61;"str1" v-if&＃61;"isShow">p><p v-text&＃61;"str2" v-else>p><button &＃64;click&＃61;"destroy">销毁button>div>
template><script>
export default {name: "LifeCircle",beforeCreate() {console.log(&＃39;1&＃xff1a;beforeCreate()&＃39;);},data() {return {isShow: false,str1: &＃39;第一条&＃39;,str2: &＃39;第二条&＃39;}},methods: {destroy() {this.$destroy();}},created() {console.log(&＃39;2&＃xff1a;created()&＃39;);},beforeMount() {console.log(&＃39;3&＃xff1a;beforeMount()&＃39;);},mounted() {console.log(&＃39;4&＃xff1a;mounted()&＃39;);this.IntervalId &＃61; setInterval(() &＃61;> {console.log(&＃39;--------------&＃39;)this.isShow &＃61; !this.isShow;}, 1000);},beforeUpdate() {console.log(&＃39;5&＃xff1a;beforeUpdate()&＃39;);},updated() {console.log(&＃39;6&＃xff1a;updated()&＃39;);},beforeDestroy() {console.log(&＃39;7&＃xff1a;beforeDestroy()&＃39;);clearInterval(this.IntervalId);},destroyed() {console.log(&＃39;8&＃xff1a;destroyed()&＃39;);}
}
script><style scoped>style>


运行结果&＃xff1a;