vue组件的生命周期的渐进深入

Vue组件的生命周期

理解：
要掌握每个生命周期什么时候被调用
首先，Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。
组件的生命周期钩子函数大致可以分为三个阶段：初始化、运行中、销毁。
让我们结合官网生命周期的图更好的理解下：

可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解:
1、beforeCreate
在实例初始化之后，数据观测(data observer) 之前被调用。

2、created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el

3、beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。

4、mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

5、beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

6、updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

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

8、destroyed
Vue 实例销毁后调用。调用后， Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

为了让大家更好的理解举个例子

<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>

        //初始化阶段
        //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函数里面做了一个初始化渲染的操作
            // render(){ //相当于把组件内部的render函数覆盖了。自己的render是将虚拟dom渲染成真实dom的操作
            //     console.log("render.....")
            // }
            //7.mounted钩子函数是初始化阶段的最后一个钩子函数
            //数据已经挂载完毕了，真实的dom也已经渲染出来了
            //这个钩子函数可以用来做一些实例化的相关操作 ===> 拖拽
            mounted() {
                console.log("mounted.....")
                console.log(this.msg, document.getElementById("title"))
            },
            //8.运行时钩子函数初始化阶段是不会主动执行的
            //只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行
            beforeUpdate() {
                console.log("beforeUpdate....")
            }
        })
        new Vue({}).$mount("#app");

然后控制台输出的结果

beforeCreate
由输出可以看到beforeCreate数据获取不到 然后真实dom节点还没有渲染出来所以也是不能获取出来的
created
进入到这个函数的时候，内部的数据是挂载上去了，然后可以获取到内部的数据所以可以输出出来，但是真实dom节点还是 没有挂载出来是获取不到的 在这部分可以操作修改内部的数据
beforeMount
在挂载开始之前被调用：相关的render函数首次被调用。在这可以做一些ajax以及初始化的绑定操作，操作修改内存数据都可以
mounted
在进入这个函数的时候，真实dom已经挂载完毕，也就意味着初始化阶段结束了，在这里因为真实dom已经挂载出来了，数据已经更改完成，可以操作更新后的虚拟dom。
beforeDestroy
当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
destroyed
组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

要掌握每个生命周期内部可以做什么事

• created 实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。
• mounted 实例已经挂载完成，可以进行一些DOM操作。
• beforeUpdate 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• updated 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。
• destroyed 可以执行一些优化操作,清空定时器，解除绑定事件。

ajax请求放在哪个生命周期中

理解：

• 在created的时候，视图中的 dom 并没有渲染出来，所以此时如果直接去操 dom 节点，无法找到相
  关的元素
• 在mounted中，由于此时 dom 已经渲染出来了，所以可以直接操作 dom 节点
• 一般情况下都放到 mounted 中,保证逻辑的统一性,因为生命周期是同步执行的， ajax 是异步执行的
• 服务端渲染不支持mounted方法，所以在服务端渲染的情况下统一放到created中

何时需要使用beforeDestroy

理解：

• 可能在当前页面中使用了 $on 方法，那需要在组件销毁前解绑。
• 清除自己定义的定时器。
• 解除事件的绑定 scroll mousemove …。