几步带你了解Vue的生命周期

一、什么是Vue生命周期？

Vue官网介绍的生命周期
人生如戏 大悲咒
0-1-0
入世
猥琐发育别浪
打怪升级更新自己
在世
回顾一生 寻找遗憾解决遗憾
离世

Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和卸载等一系列过程，这是 Vue 的生命周期

二、让我们来认识一下vue生命周期里边有八个生命周期钩子函数分别是

beforeCreat() 创建前
created（）创建

beforeMount()挂载前
mounted（）挂载

beforeupdate（）更改前
updated（） 更改

beforeDestroy()销毁前
destroyed（）销毁

Vue官网生命周期的图示

1、beforeCreat() 实例创建前

html结构：

<div id="app"> 
        <my-component></my-component>
    </div>
  
    <!--定义组件的模板结构-->
    <template id="my-component">
        <div>
            <h1 id="title">hello---------{{msg}}</h1>
            <p><input type="text" v-model="msg"></p>
        </div>
    </template>

vue代码

        //1.一个组件或者实例的生命周期都是通过new开始的   
        //2.实例化之后，内部会做一些初始化事件与生命周期相关的配置 
        Vue.component("my-component",{
            template:"#my-component",
            data(){
                return {
                    msg:1
                }
            },
            //3.这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的
            //同时页面中的真实dom节点也没有挂载出来，null
            beforeCreate(){
                //控制台输出 undefined null 
                console.log(this.msg,document.getElementById("title"))
            },
        })

2、created创建实例

            //4.created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来
            //通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定
            created(){
                //控制台输出 1，null
                console.log(this.msg,document.getElementById("title"))
            }

3、beforeMount 挂载前

            //5.接下来的过程，就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。
            //6.beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来
            //此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作
            beforeMount(){
                //控制台输出 1，null
                console.log(this.msg,document.getElementById("title"))
            },

4、mounted挂载

            //7.mounted钩子函数是初始化阶段的最后一个钩子函数
            //数据已经挂载完毕了，真实的dom也已经渲染出来了
            //这个钩子函数可以用来做一些实例化的相关操作 ===> 比如图片拖拽功能
            mounted(){
                //控制台打印出 1，<h1 id="title">hello---------1</h1>
                console.log(this.msg,document.getElementById("title"))
            },

5、beforeUpdate 更新前

            //8.运行时钩子函数初始化阶段是不会主动执行的
            //只有dom挂载完毕了，然后再去当数据发生变化的时候， beforeUpdate这个钩子函数才会执行
            //当我们在输入框输入内容的时候会触发这个钩子函数
           
            beforeUpdate(){
                console.log("beforeUpdate....")
            }

6、updated更新后

               //当数据发生改变的时候，引发虚拟dom的对比，虚拟dom对比完成后，再去渲染真实的dom结构
                //当真实的dom结构渲染完成后，内部才会执行updated钩子函数
                // 注意做数据的修改操作 可能引起死循环
                
                
                updated(){
                 console.log("updated....")
                }

7、 beforeDestroy 销毁前

实例销毁之前调用。在这一步，实例仍然完全可用

8、destroy销毁

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

这两个生命周期 用到的比较少 顾名思义 销毁前这个生命周期 的时候 还是可以对元素进行操作的

之前在项目中用到的就是 高级搜索在销毁的时候判断是否有值 然后返回相应的状态

销毁这个生命周期执行过后 实例的属性和方法就不能再用了