生命周期钩子。。。

一.什么是生命周期？

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能

二.Vue实例生命周期的图示：

三.示例

        <script src="./vue.js"></script>
        <script>
            var vm = new Vue({
                el:'#example',
                data:{
                    message:'hello'
                },
                beforeCreate() {
                    console.log('beforeCreate');
                    //此时组件的选项对象还未创建，el和data并未初始化，因此无法访问methods，data,computed等上的方法和数据。
                },
                created() {
                    console.log('created');
                    //数据观测、属性和方法的运算，watch/event事件回调，完成了data数据的初始化，el没有。
                },
                beforeMount() {
                    console.log('beforeMount');
                    //编译模板，把data里面的数据和模板生成html，完成了el和data初始化
                },
                mounted() {
                    console.log('mounted');
                    //挂载完成，mounted只会执行一次。
                },
                beforeUpdate() {
                    console.log('beforeUpdate');
                    //可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程。
                },
                updated() {
                    console.log('updated');
                    //组件更新后调用$destroyed函数，进行销毁
                    //this.$destroy();
                    //由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用
                },
                beforeDestroy() {
                    console.log('beforeDestroy');
                    //这一步还可以用this来获取实例
                    //一般在这一步做一些重置的操作，如清除掉组件中的定时器和监听的dom事件
                },
                destroyed() {
                    console.log('destroyed');
                    //所有的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
                }
            })
        </script>