学习笔记Vue（七）—— 生命周期

先上一张经典图！
把这张图看懂了就理解生命周期了,上一篇挂载过程也可以看这个图

生命周期钩子函数（参考上图粉色框里的）：

1. beforeCreate()

        const vm = new Vue({
            el: "#app",
            data:{
                name: 'a'
            },
            beforeCreate(){
                //不能获取data
                console.log(this);    // Vue对象
                console.log(this.$data);  //undefiend
                console.log('beforeCreate');  
            }
     	});

2. created()
   在这个生命阶段，对象及其事件完全初始化。

        const vm = new Vue({
            el: "#app",
            data:{
                name: 'a'
            },
            created(){
                //可以选择在这个阶段调用ajax
                console.log(this.$data); // Object  可以获取到data了
                console.log('Create');
            }
     	});

3. beforeMount()
   在这个阶段，它检查是否有任何模板可用于要在DOM中呈现的对象。如果没有找到模板，那么它将所定义元素的外部HTML视为模板。

        const vm = new Vue({
            el: "#app",
            data:{
                name: 'a'
            },
            beforeMount(){
                console.log(this.$el); //<div id="app"></div>
            }
     	});

4. mounted()
   一旦模板准备就绪。它将数据放入模板并创建可呈现元素。用这个新的数据填充元素替换DOM元素。

        const vm = new Vue({
            el: "#app",
            data:{
                name: 'a'
            },
            mounted(){
                console.log(this.$el); //<div id="app"></div>
            }
     	});

5. beforeUpdate()
   更改已完成，但尚未准备好更新DOM
6. update()
   在DOM中呈现的更改
7. beforeDestroy()
   对象准备死掉
8. destroyed()
   死了