vue生命周期及使用 && 单文件组件下的生命周期

生命周期钩子

　　这篇文章主要记录与生命周期相关的问题。之前，我们讲到过生命周期，如下所示：

根据图示我们很容易理解vue的生命周期：

js执行到new Vue() 后，即进入vue的beforeCreate状态。
接着观察data下的数据，紧接着create。
create之后，就会检测是否含有el属性，如果有，就直接检测是否含有模板属性；如果没有，就当vm.$mount()调用之后再检测，vm.$mount()的作用就是将Vue实例挂载到某一个DOM元素上。
如果有template，那么我们就编译模板到render函数中，作用就是为了将模板中的元素渲染进去；如果没有template，我们就把el所在的HTML作为模板编译。
这样就进入了 beforeMount 状态。
在mounted 之前，就会创建一个 vm.$el 用来替代实例中的el， ok！这样就可以mouted了。
接着，如果data发生了变化，就会有beforeUpdata，在替换了之后，就是updated的状态啦！这是一个循环的过程，因为updated是可以一直更新的嘛！
最后如果我们调用了 vm.$destroy() 就会进入 beforeDestory, 然后解除 watchers、child components 以及 listeners，最后就destroyed了，那么他的生命也就结束了。

总结来说：是 new Vue() 开启了vue实例的生命周期， vm.$destroy() 结束了vue实例的生命周期。

当然了，对于不同的生命周期，都对应着相应的钩子函数，且一共有8个钩子函数，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="example">
        <p>朱振伟</p>
        {{message}}
    </div>
    <script>
        var example=new Vue({
            el:'#example',
            beforeCreate () {
                alert("beforeCreate");
            },
            created () {
                alert("created");
            },
            beforeMount () {
                alert("beforeMount"); 
            },
            mounted () {
                alert("mounted");
            },
            beforeUpdate () {
                alert("beforeUpdate");
            },
            updated () {
                alert("updated");
            },
            beforeDestroy () {
                alert("beforeDestroy");
            },
            destroyed () {
                alert("destroyed");
            }
        });
    </script>
</body>
</html>

当我们运行之后，会发现，beforeCreate、created、beforeMount、mounted以此触发，如果我们在控制台输入 example.message = "JohnZhu"; 那么就又会依次触发 beforeUpdate 和 updated 对应的钩子函数，如果我们在控制台输入 example.$destroy() 那么就会依次触发 beforeDestroy 和 destroyed 对应的钩子函数。

生命周期大概就是这样了。

补充：

　　除了在vue官网（上图）中提到的生命周期钩子之后，vue2中还添加了 activated 和 deactivated 钩子函数，当渲染的组件启用了 keep-alive 时，那么进入一个路由指定的组件时，就会调用 activated 钩子函数，如果一个组件没有设定 keep-alive ，那么就不会调用 activated 钩子函数，而是调用 deactivated 钩子函数。

　　比如：

    <div id="app">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>

　　这里的 router-view 是所有的页面都会在这里渲染的，而 keep-alive 又包裹在这之外，所以说这个app中的所有路由在切换时都会调用 activated 钩子函数。

单文件组件下的生命周期

　　先看下面这个例子：

<template>
    <div class="personal-wrap">
      <Personal></Personal>
      <button v-on:click="exit" class="btn" v-if="loginBool">退出登录</button>
      <button v-on:click="login" class="btn btn-login" v-else>现在登录</button>
      <FooterMenu></FooterMenu>
    </div>
</template>

<script>
  import FooterMenu from '@components/menu';
  import Personal from '@components/personal';
  import {mapState,mapMutations, mapActions} from 'vuex'
  export default {
    components: {
      FooterMenu,
      Personal
    },

    data () {
      return {
        loginBool: Boolean(sessionStorage.getItem("loginBool"))
      }
    },


    methods: {
      ...mapMutations([
        'UPDATE_PICTURES'
      ]),
      ...mapActions([
        'loginWx'
      ]),

      exit: function () {
        var result = confirm("确认注销登录？");
        if (result ==  true) {
          window.location.href =  window.location.href.replace(window.location.search, "");
        }
      },
      login: function () {
        this.loginWx(2);
      }
    },
    beforeCreate () {
      document.title = "替换之后";
    },
    created () {
      this.UPDATE_PICTURES(3);
      alert( 'created' + JSON.stringify(document.querySelector('.btn')));
    },
    beforeMount () {
      alert( 'beforeMounte' + JSON.stringify(document.querySelector('.btn')));
    },
    mounted () {
      alert( 'mounted' + JSON.stringify(document.querySelector('.btn')));
    }

  }
</script>

　　这是一个单文件组件，因为只是为了说明生命周期的使用，删去了一部分。

beforeCreate 是在创建data之前的钩子，即这时刚刚创建完Vue实例，然后el，data这些还都没有，但是因为这是单文件组件，所以，document.title是可以访问到的，这点值得注意。并且由于这时候是没有data和method可以使用的，所以不能使用method下的方法。
接着在created之后，el仍然是没有挂载的，但是data已经初始化完成了，并且一些方法(methods)也已经可以使用了，没有挂载，所以访问不到单组件中的html元素。
boforeMount 这时仍然没有挂载，只是开始调用了render函数，同样，没有挂载，也是访问不到vue单组件中的html元素的。
在mounted之后，这时已经将vue和组件联系起来，挂载完成，所以就可以得到其中的html元素了。

常用的钩子

　　可以看出，我们可以在beforeCreate中使用一些操作document的方法。在created中可以使用大部分的方法。在 mounted中可以使用与挂载元素相关的一些方法，如操作dom。

补充：当然，因为localStorage这种东西都是一直存在的，所以在任何生命周期下都是可以正常访问 localStorage 和 sessionStorage的。