vue生命周期的探索-原创手记-慕课网

关于生命周期其实在Android是一个比较常见的话题，我在接触前端的时候，我首先研究的就是这个东西。因为你只有把握住这个东西生命线，你才能更好的去运用它，我这里就结合我自己的一些所见所闻做一点生命周期的介绍。

一、生命周期示意图：

vue生命周期示意图
如上图所示，在vue组件生命周期内一共经历：

beforeCreate:组件创建前
created：组件创建
beforeMount：组件挂载前
mounted：组件挂载
beforeUpdate：组件更新前
updated：组件更新
beforeDestroy：组件销毁前
destroyed：组件销毁
上面分别是对于组件生命周期的一些概述，但是并没有去结合代码去看，感觉带入感并没有这么强，下面就用代码引入的方法详细的向大家介绍
二、代码解读

<template>
  <div ref="myapp" id="app">
    <img src="./assets/logo.png">
    <div>{{message}}</div>
    <button @click="tokenMsg">说点什么</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        message: '我是一个菜鸟'
      }
    },
    methods: {
      tokenMsg(){
        this.message += "+1";
      }
    },
    beforeCreate() {
      console.group('beforeCreate 创建前状态===============》');
      console.log("%c%s", "color:red" , "el     : " + this.$refs.myapp);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message)
    },
    created: function () {
      console.group('created 创建完毕状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$refs.myapp);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    beforeMount: function () {
      console.group('beforeMount 挂载前状态===============》');
      console.log("%c%s", "color:red","el     : " + (this.$refs.myapp));
      console.log(this.$refs.myapp);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    mounted: function () {
      console.group('mounted 挂载结束状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$refs.myapp);
      console.log(this.$refs.myapp);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$refs.myapp);
      console.log(this.$refs.myapp);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$refs.myapp);
      console.log(this.$refs.myapp);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$refs.myapp);
      console.log(this.$refs.myapp);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$refs.myapp);
      console.log(this.$refs.myapp);
      console.log("%c%s", "color:red","data   : " + this.$data);
      console.log("%c%s", "color:red","message: " + this.message)
    }
  }
</script>

上面的项目就是我用vue-cli脚手架新建的一个vue项目。并且改代码只要拷贝进项目可以直接去查看。运行效果如下 Chrome调试器log
从上面的log上面其实可以看出来：
1、 beforecreate data和组件都没有被初始化的状态
2、create data里面的内容已经可以访问到了
3、 mounted 页面已经被挂载成功了。
那么结合代码，当点击button的时候，发现console会发生变化
更新data里面的数据
由上图可知，当页面data内的数据发生变化的时候，并不会触发上面说到的生命周期方法，而是会触发到beforeupdate和update方法。

同理当页面关闭的时候，页面会先beforedestroy和destroyed方法。其中可以看见的是：
1、beforedestroy状态下，所有的页面内都是可以访问的状态
2、destroyed下，组件会被回收，但是data却依旧能被访问

三、生命周期总结

生命周期总结图
可能这里结合实践我可能需要bb两句：
一、 created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态
二、 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick

四、父子组件生命周期

父组件如下：

<template>
  <div ref="myapp" id="app">
    <child-view v-if="showView"/>
    <div>{{message}}</div>
    <button @click="tokenMsg">说点什么</button>
    <button @click="displayView">销毁子组件</button>
  </div>
</template>

<script>
  import ChildView from './components/HelloWorld'
  export default {
    components:{
      ChildView
    },
    data(){
      return{
        message: '我是一个菜鸟',
        showView: true
      }
    },
    methods: {
      tokenMsg(){
        this.message += "+1";
      },
      displayView(){
        this.showView = !this.showView;
      }
    },
    beforeCreate() {
      console.group('beforeCreate 创建前状态===============》');
    },
    created: function () {
      console.group('created 创建完毕状态===============》');
    },
    beforeMount: function () {
      console.group('beforeMount 挂载前状态===============》');
    },
    mounted: function () {
      console.group('mounted 挂载结束状态===============》');
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
    }
  }
</script>

子组件如下：

<template>
  <div style="background: red;color: #ffffff;">
    {{msg}}
    <button @click="addMsg">说点什么</button>
  </div>
</template>

<script>
  export default {
    methods: {
      addMsg(){
        this.msg += "+2"
      }
    },
    beforeCreate() {
      console.log('child beforeCreate 创建前状态===============》')
    },
    created: function () {
      console.log('child created 创建完毕状态===============》');
    },
    beforeMount: function () {
      console.log('child beforeMount 挂载前状态===============》');
    },
    mounted: function () {
      console.log('child mounted 挂载结束状态===============》');
    },
    beforeUpdate: function () {
      console.log('child beforeUpdate 更新前状态===============》');
    },
    updated: function () {
      console.log('child updated 更新完成状态===============》');
    },
    beforeDestroy: function () {
      console.log('child beforeDestroy 销毁前状态===============》');
    },
    destroyed: function () {
      console.log('child destroyed 销毁完成状态===============》');
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

初始化效果如图：
父子组件初始化
当父组件data改变的时候：

当子组件data改变的时候：

当销毁子组件的时候：

当父组件被销毁的时候

当父组件改变传给子组件的props值的时候

总结：
1、仅当子组件完成挂载后，父组件才会挂载
2、当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）
3、父子组件在data变化中是分别监控的，但是在更新props中的数据是关联的
4、销毁父组件时，先将子组件销毁后才会销毁父组件

六、说在最后

可能有很多人都不会理解我为什么会花一个晚上的时候去整理这个东西，但是在我们的眼中每个程序员的能力并没有太大的差距，或者说我没有能力做的比别人好就只能把基础打的比别人牢了。好了，又到凌晨了，去洗澡了