第十六节:带你梳理Vue2: 生命周期与钩子函数

本文链接：https://blog.csdn.net/fjiex/article/details/139180982

前沿:
通过前面几节的学习，我们已经对vue有了初步的了解，大致了解了vue可以帮我们干什么，
那么接下来我们就来看看vue的生命周期和它常用的钩子函数,

1. 理解生命周期的含义

生命周期：就是一个组件从实例化创建并添加到DOM树开始 ,一直到组件被销毁的整个过程。

生命周期函数(钩子函数): 就是在Vue生命周期的整个过程的不同阶段被调用的函数

2. 生命周期图

首先来看一下官网对于vue生命周期的图解, 官网上目前有8个生命周期函数,
还有两个我们之后再看. 先看看基本的8个钩子函数

生命周期图.png

3. 钩子函数的理解

通过打断点的方式，让我们好好理解生命周期的钩子函数，你们也可以自己复制代码进行测试好好理解Vue的钩子函数

<script>
    new Vue({
     
        el: "#app",
        data:{
     },
        methods:{
     },
        
        // 1. 在实例化之前被调用 
        beforCreate: function(){
     
            // 这个方法的时候data还没有加载,所以此方法用不到
            // 一般不会在这里处理什么事情
            alert("组件实例化之前执行的函数");
            debugger;
        }，
        
        // 2. 实例化初始之后,被添加到DOM元素之前触发
        created: function(){
     
        	// 可以在这里发送ajax,初始化操作
            alert("组件实例化完毕，但页面还未显示");
        	debugger;
    	}，
        
        // 3. 在元素(虚拟DOM)已经准备好被添加到DOM,但是还没有添加时触发
        beforeMount: function(){
     
            // 要保证有el,或者vm.$mount() 否则这里不会执行
            alert("组件挂载前，但页面还未显示，但是虚拟DOM已经配置");
            debugger;
    	}，
        
        // 4. 会在元素创建后触发
        mounted: function(){
     
            //  如果有template属性模板,会用模板替换外部的el,只要有此属性,直接卸载外部el找中的内
            // 这将没有任何意义了
       		//  template只能有一个更元素,不能是文本节点, 
       		// 真实的dom渲染完了,可以操作dom了
            alert("组件挂载后，此方法执行后，页面显示");
            debugger;
    	}，
        
        // 5. 在数据更新将要对DOM做一些修改时触发
        beforeUpdate: function(){
     
            //  当页面依赖的数据发生变化时才执行,一般用watch来替换,这个方法不好用
        	// 页面依赖的数据发生变化,数据已变化,页面还没有渲染
            alert("组件更新前，但页面还未显示，但是虚拟DOM已经配置");
            debugger;
    	}，
        
        // 6. 后在DOM的更新已经完成后触发
        updated: function(){
     
            // 重新渲染页面后执行, 可以操作DOM了
            alert("组件更新后，此方法执行后，页面显示");
            debugger;
    	},
            
         // 7. 在组件即将被销毁并且从DOM上移出时触发
    	beforeDestroy: function(){
     
            //没什么意义,死了就什么都干不了了
            alert("组件销毁前");
            debugger