Vue 生命周期

Vue 生命周期

一、vue基本生命周期

组件从创建到销毁的一系列过程叫做组件的声明周期。
vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，
并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）

组件的生命周期钩子函数大致可以分为三个阶段：初始化、运行中、销毁
初始化阶段： beforeCreate created beforeMount mounted
运行中阶段： beforeUpdate updated
销毁阶段： beforeDestroy destroyed

初始化阶段

1.一个组件或者实例的生命周期都是通过new开始的
2.实例化之后，内部会做一些初始化事件与生命周期相关的配置

Vue.component("my-component",{
    template:"#my-component",
    data(){
        return {
            msg:1
        }
    },

3.这个钩子函数初始化的时候立马执行,此钩子函数里面是获取不到数据的
同时页面中的真实dom节点也没有挂载出来，null

 beforeCreate(){
    console.log("beforeCreate....")
    console.log(this.msg,document.getElementById("title"))
            },

4.created钩子函数内部的数据已经被挂载了，但是真实dom节点还是没有渲染出来
在这个钩子函数里面，如果同步的去更改数据的话，运行中钩子函数是不会执行的。
通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定

 created(){
           // this.msg = 222222222222222
           console.log("created...")
           console.log(this.msg,document.getElementById("title"))
       },

5.接下来的过程，就是组件或者实例去查找各自的模板，让后将其编译成虚拟dom，即将放入render函数中做初始化渲染的操作。

6.beforeMount代表dom马上就要被渲染出来了，但是还没有真正的在页面中渲染出来
此钩子函数与created钩子函数基本一致，可以做ajax与初始化事件的绑定操作

  beforeMount(){
        console.log("beforeMount....")
        console.log(this.msg,document.getElementById("title"))
            },

生成好了虚拟dom，然后在render函数里面替换对应的el，渲染成真实dom节点
相当于在render函数里面做了一个初始化渲染的操作

7.mounted钩子函数是初始化阶段的最后一个钩子函数
数据已经挂载完毕了，真实的dom也已经渲染出来了
这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽

 mounted(){
   	console.log("mounted.....")
    console.log(this.msg,document.getElementById("title"))
            },

运行中阶段

8.运行时钩子函数初始化阶段是不会主动执行的，只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行

beforeUpdate(){
                console.log("beforeUpdate....")
            }
        })

9.这个钩子函数里面函数dom获取的数据内容是更新后的内容

销毁阶段

beforeDestroy

10.beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。

Destroyed

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