Vue生命周期

[TOC]

## vue生命周期

vue生命周期：从实例一个vue到vue执行过程最后至vue销毁的整个过程，vue生命周期经历过数据初始化，数据监听，模板编译，DOM渲染，vue在生命周期的各个时期提供了可操作的钩子函数，通过操作不同时期的钩子函数来实现需求。

下面罗列了主要的钩子函数或叫生命周期函数

+ beforeCreate()：生命周期的第一个钩子函数，这个钩子函数执行时，vue实例中的data和methods还没有初始化，这时去调用data中的数据得到的结果是undefined，如果去调用methods中的方法则会提示：Error in beforeCreate hook: "TypeError: this.show is not a function"

+ created()：在这个生命周期钩子函数执行中，vue已经初始化好了data和methods，它是最早可以操作data和methods的方法

+ beforeMount()：这个周期钩子函数表示模板已经在内存中编辑完成了，还没有把模板渲染到页面上，示例中我们在这个方法内去打印id='msgInfo'的div的内容，结果是{{msg}}

+ mounted()：到这里的时候内存中的模板，已经渲染到页面上了，同样打印id='msgInfo'的div的内容，结果是hello world，mounted是实例创建期间的最后一个周期函数，执行完mounted函数表示vue实例已经完全创建好了，初始化完毕了，开始进入到运行阶段了，如果要通过某些插件操作页面上的DOM节点，最早就是在mounted中执行

以上四个钩子函数就是vue初始化实例阶段的函数，下面进入到运行阶段的两个钩子函数，beforeUpdate和updated

+ beforeUpdate()：当vue中的data发生改变时触发，这时内存中的数据已经变化了，但还没有把变化的结果渲染到界面中，示例中我们在beforeUpdate()中打印了两个结果，第一是vm中的data.msg，它输出的是my name is hanmeimei，这说明我们点击按钮后数据已经发生了变化，但是我们打印的第二结果还是hello world，这说明新的数据还没有被渲染到页面上

+ updated()：在执行完上面的beforeUpdate()后，vue会根据data的变化在内存中重新渲染出一份内存DOM树，然后把最新的DOM渲染到页面上，这个时候就完成了数据从data到view的更新也就是vm中model层到视图层的更新，所以在updated函数中再去打印id='msgInfo'的div的内容，结果就是变化后的my name is hanmeimei了

最后两个生命周期函数就是页面关闭后的vue实例销毁函数

+ beforeDestroy()：当执行到这一步时，vue从运行阶段进入到了销毁阶段，在执行这个方法中vue实例中的data，methods，过滤器，指令等还处于可用状态，此时还没有被真正的销毁

+ destroyed()：执行到最后的钩子函数时，vue的实例的所有数据，方法，过滤器，指令都已经不可用了

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.js"></script>
</hred>
<div id="app">
    <div id="msgInfo">{{msg}}</div>
    <input type="button" value="我也变化了" @click="change()" />
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello world"
        },
        methods: {
            show(val) {
                console.log(val)
            },
            change() {
                this.msg = "my name is hanmeimei"
            }
        },
        beforeCreate() {
            console.log(this.msg)
            //this.show('beforeCreate')
        },
        created() {
            console.log(this.msg)
            this.show('created')
        },
        beforeMount() {
            console.log(document.getElementById('msgInfo').innerText)
        },
        mounted() {
            console.log(document.getElementById('msgInfo').innerText)
        },
        beforeUpdate() {
            console.log(this.msg)
            console.log(document.getElementById('msgInfo').innerText)
        },
        updated(){
            console.log(document.getElementById('msgInfo').innerText)
        },
        beforeDestroy(){
        },
        destroyed(){
        }
    })
</script>

</html>
```