VUE 生命周期函数【生命钩子函数】

周大胖子

来 先掰扯一下：嘛是生命周期函数？ 嘛又叫生命周期钩子？
容我大白话翻译一下： 生命周期说白了，粗暴的理解方式就是  一个组件 从 开始创建， 到最后销毁的全过程。

先贴上VUE所有的 生命周期【胖爷写了一大一小两个组件做测试 home 内包含组件 head 】
Home.vue

1. <template>
2.     <div id="home">
3.         <button @click="chan"> 点击切换触发生命周期 </button>   
5.         <!-- 头部组件引入 -->
6.         这是home组件 <span class="lmtest">测试值是否变色</span>
7.         
8.         <v-head  v-if="b" ></v-head>
9.     </div>
10. </template>
12. <script>
13. // 1.引入头部组件  【组件文件尽量放在 components/ 目录中，大写首字母的.vue文件 】
14. // 2.注册组件 【 注意如果下面components内容为ES6 语法 则html 则写成对应的标签  】
15. // 3.引入组件 【在页面中写入<v-head></v-head> 】
16. import Head from "./Head.vue";
17. export default {
18.   data() {
19.     return {
20.       b:true
21.     };
22.   },
23.   methods: {
24.     chan(){
25.       if(this.b){
26.         this.b = false
27.       }else{
28.         this.b = true
29.       }
30.     }
31.   },
32.   name: "app",
33.   components: {         //这用于组件的注册，
34.     'v-head':Head
35.   }
36.   ,beforeCreate(){
37.     alert('创建vue实例前')
38.     console.log('创建vue实例前',this)
39.   }
40.   ,created() {
41.     alert('创建vue实例后')
42.     console.log(this)
43.   }
44.   ,beforeMount(){
45.     alert('home挂载到demo前')
46.   }
47.   ,mounted(){
48.     alert('home挂载到demo后')
49.   }
50.   ,beforeUpdate(){
51.     alert('数据变化更新前')
52.   }
53.   ,updated(){
54.     alert('数据变化更新后')
55.   }
56.   ,beforeDestroy(){
57.     alert('Vue实例销毁前')
58.   }
59.   ,destroyed(){
60.     alert('VUE实例销毁后')
61.   }
62. };
63. </script>
65. <style scoped>
66. .lmtest {
67.   background: #000;
68.   color: #fff;
69. }
70. h2 {
71.   font: 10px;
72. }
73. </style>

复制代码

Head.vue

1. <template>
2.     <div id="head">
3.         <h2>  这是头部组件  </h2>
4.     </div>
5. </template>
7. <script>
8. export default {
9.    beforeCreate(){
10.     alert('head----创建vue实例前')
11.     console.log('创建vue实例前',this)
12.   }
13.   ,created() {
14.     alert('head----创建vue实例后')
15.     console.log(this)
16.   }
17.   ,beforeMount() {
18.     alert("head----挂载到demo前");
19.   },
20.   mounted() {
21.     alert("head----挂载到demo后");
22.   }
23.   ,beforeDestroy(){
24.     alert('head----Vue实例销毁前')
25.   }
26.   ,destroyed(){
27.     alert('head----VUE实例销毁后')
28.   }
29. };
30. </script>
32. <style>
33. </style>

复制代码

在 每个阶段打印 this 都会得到不同的值：

2. vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容;
4. beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象;
6. created ：数据已经绑定到了对象实例，但是还没有挂载对象;
8. beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性，
9.     $el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备
10.     注入到我们vue实例指明的el属性所对应的挂载点;
12. mounted:将$el的内容挂载到了el，相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom，上面我们
13.     就会发现dom的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进
14.      行各种操作. [这个最重要]
16. 当我们的data发生改变时，会调用beforeUpdate和updated方法
19. beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
21. updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新
23. 实例的销毁
25. beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数
26.             据与view的绑定，即数据驱动

复制代码

参考文献：https://www.cnblogs.com/caizhenbo/p/6418291.html