首页手记 vue生命周期的探索

vue生命周期的探索

标签：

JavaScript Vue.js

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

一、生命周期示意图：

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

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

<template>
  <div ref="myapp" id="app">
    <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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项目。并且改代码只要拷贝进项目可以直接去查看。运行效果如下
从上面的log上面其实可以看出来：
1、 beforecreate data和组件都没有被初始化的状态
2、create data里面的内容已经可以访问到了
3、 mounted 页面已经被挂载成功了。
那么结合代码，当点击button的时候，发现console会发生变化

由上图可知，当页面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、销毁父组件时，先将子组件销毁后才会销毁父组件