Vue生命周期理解

用了一段时间的Vue，当然还处于初级小白，对一些基本的东西还是不太了解，首先应该就说Vue的生命周期(钩子)，不明白这个估计在以后会踩好多的坑，所以今天去度娘上搜了好多文章。

1. 话不多说上来先Po一张图

2. Lifecycle Hooks

3. 废话不多说Po代码吧！！！

• 先说创建和挂载如下图 （注意标注）

    <div id="app">
        <span>{{msg}}</span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'this is yuhior Blog'
            },
            beforeCreate: function() {
                console.group('beforeCreate组件实例刚被创建，属性计算前-------->');
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.msg);
            },
            created: function() {
                console.group('created 创建完毕,-------->');
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.msg);
            },
            beforeMount: function() {
                console.group('beforeMount挂载之前-------->');
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.msg);
            },
            mounted: function() {
                console.group('mounted挂载之后-------->');
                console.log(this.$el);
                console.log(this.$data);
                console.log(this.msg);
            },
        })
    </script>

复制代码

• 在看组件更新 （这里我们在 chrome console里执行以下命令）

//数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
beforeUpdate: function() {
        console.group('beforeUpdate组件更新前-------->');
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.msg);
    },
updated: function() {
        console.group('updated 更新完成状态-------->');
        console.log('真实dom结构：' + document.getElementById('app').innerHTML);
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.msg);
    },
复制代码

app.msg= '我是更新'; //效果如下
复制代码

• 最后就是销毁了

beforeDestory: function() {
        console.group('beforeDestory 组件销毁之前-------->');
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.msg);
    },
destoryed: function() {
        console.group('beforeDestory 组件销毁之后-------->');
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.msg);
    }
复制代码

beforeDestory：实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

destoryed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

注意：vue2.0之后主动调用$destroy()不会移除dom节点，不推荐直接destroy这种做法，如果实在需要这样用可以在这个生命周期钩子中手动移除dom节点