vue 生命周期渗透

vue 生命周期

1. 实例、组件通过 new Vue() 创建出来后会初始化事件和生命周期，然后就会执行 beforeCreate 钩子函数，这个时候数据还没有挂载，无法访问到数据和真实 dom ，一般我们在这个钩子函数里不做任何操作
2. 挂载数据、绑定事件等，然后执行 created 函数，这个时候已经可以访问到数据了，也可以更改数据，但获取不到真实 dom，在这里更改数据不会触发 updated 函数，一般这个钩子函数中我们可以做 ajax 异步请求，绑定初始化事件
3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟 dom 放入 render 函数中准备渲染，然后执行 beforeMount 钩子函数，在这个函数里面虚拟 dom 已经创建完成，马上就要渲染，这里可以更改数据，也不会触发 updated 函数，一般这里可以做初始化数据的获取
4. 接下来就是开始 render，渲染出真实 dom ，然后执行 mounted 钩子函数，此时，组件已经出现在页面中了，数据、真实 dom 都已经处理好了，事件也挂载好了，这里可以操作真实 dom ，比如拖拽事件
5. 当组件或实例的数据更改后，会立即执行 beforeUpdate，然后 vue 的虚拟 dom 机制会重新构建虚拟 dom 与原来的虚拟 dom 利用 diff 算法，对比出差异，重新渲染页面，这里一般什么也不做
6. 当更新完成后，执行 updated，数据已经更新完成，dom 也重新 渲染完成，可以操作更新后的 dom
7. 当经过某种途径调用 $destroy 方法后，立即执行 beforeDestroy，一般在这里做善后工作，例如清除定时器、清除非指令绑定的事件。
8. 组件的数据绑定、监听等都移除掉，剩下 dom 空壳，这个时候执行 destroyed，销毁组件

<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>
<script>
    /*
            组件从创建到销毁的一系列过程叫做组件的声明周期。
            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
        updated(){
          console.log("updated....")
        },
        //10.组件销毁之前，一般可以做：定时器的清除，事件解绑的操作
        beforeDestroy(){
          console.log("beforeDestory....")
        }
        // 11.组件销毁完成
        destroyed(){
          console.log("destroyed....")
        }
    })
    new Vue({}).$mount("#app");
</script>