vue生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

先上图：

生命周期主要有三个阶段：

一，初始化显示；（重要勾子 mounted 网页加载完毕触发）

二，更新显示；(重要勾子beforeUpdate 数据属性更新前)

三，死亡；（重要勾子beforeDestroy vm死亡前）

每个生命周期都会有对应的生命周期的函数，或者叫做勾子函数；

实例：

new Vue({

        el:'#app',

        data:{

            name: ''

        },

        methods:{

            update(){

                this.name='修改了数据'

            },

            destroy(){

                this.$destroy();

            }

        },

        mounted(){ // 调用一次

            console.log("mounted() 页面初始化成功")

            this.name="初始化数据"

        },

        beforeUpdate(){

          console.log("beforeUpdate() 数据属性变化之前")

        },

        updated(){

            console.log("updated() 数据属性变化后")

        },

        beforeDestroy(){ // 调用一次

            console.log("beforeDestroy() vm要死亡了")

        },

        destroyed(){

            console.log("destroyed() vm死掉了")

        }

    });

<div id="app">

    <p>{{name}}</p>

    <button @click="update">update</button>

    <button @click="destroy">destroy</button>

</div>