vue的生命周期

二、生命周期

1.创建阶段的生命周期函数
首先通过var vm = new Vue({}) 创建一个Vue实例对象，vm是一个空的Vue实例对象
beforeCreate() （初始化之后） 在beforeCreate()生命周期函数执行的时候，vue对象中的data和methods中的数据没有初始化，在beforeCreate()中无法访问data数据和methods中的方法；
2.created() （创建完成 ）
此时data数据和methods中的方法已经初始化好了，也就是说，
3.created()函数
是最早能够访问data数据和methods中的方法的生命周期函数；
4.beforeMount()（挂载之前）
beforeMount()函数之前，Vue开始编译模板，把Vue代码中的指令进行执行，最终在内存中生成一个编译好的模板字符串，然后把这个模板字符串渲染为内存中的DOM。注意：此时只是把模板字符串渲染在内存中，还没有真正挂载在页面上。当
5.beforeMount()函数执行的时候，
模板已经在内存中编译好了，只是没有渲染到页面上，页面中还是旧的模板字符串，没有被真正的数据值替换过来；
6.mounted()（被挂载之后）
此函数执行时，模板字符串已经真正的挂载在页面中，用户可以看到渲染好的页面，注意：mounted是创建阶段的最后一个生命周期函数，当mounted执行完，表示实例已经创建好了。此时组件脱离创建阶段，进入运行阶段
运行阶段的生命周期函数
7.beforeUpdate()（数据更新前）
此函数执行时，界面数据还没有更新，但是data中的数据已经更新了，页面尚未和内存中的data同步；
8.updated()（被更新后）
先根据data中最新的数据在内存中重新渲染一份新的DOM树，然后把最新的DOM树渲染到真正的页面中去，就完成了从data（Model）→ view的更新；此函数执行时，页面data已经和内存中保持同步，都是最新的数据。
包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

activated() keep-alive组件激活时调用，也就是当页面存在缓存时调用。进入当前存在activated()函数的页面时，一进入页面就触发，可用于初始化页面数据等
deactivated() keep-alive 组件停用时调用，该钩子在服务器端渲染期间不被调用，在页面结束时触发该方法，可清除掉滚动方法等缓存。
销毁阶段的生命周期函数
9.beforeUpdate() （销毁之前）
当执行beforeUpdate()函数时，Vue实例已经从运行阶段进入销毁阶段，当执行beforeUpdate()时候，data和methods、指令、过滤器还处于可用状态，没有被销毁；
10.destoryed()（销毁之后）
当执行destoryed()函数时候，组件已经完全销毁，所有数据都不可用
10.代码实现

<template>
  <div>
      <div style="font-size:10vw">生命周期 {{message}}</div>
      <p style="font-size:10px">生命周期 {{message}}</p>
      <div style="background-color:red;height:12vh"></div>
      <button @click="btn">加法</button>
      <p>{{num}}</p>
      <button @click="xiaohui">销毁</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            message:'你好',
            num:0
        }
    },
    created(){
        alert('这是创建完成之后')
    },
    beforeCreate(){
        alert('这是创建之前')
    },
    beforeMount(){
        alert('挂载之前');
    },
    mounted(){
        alert('挂载之后');
    },
    beforeUpdate(){
        alert('更新之前')
    },
    updated(){
        alert('更新之后')
    },
    beforeDestroy(){
        alert('销毁之前')
    },
    destroyed(){
        alert("销毁之后");
        this.num=0
    },
    methods:{
        btn(){
            this.num+=1
        },
        xiaohui(){
            this.$destroy()
        }
    }
}
</script>

<style>

</style>