Vue生命周期超级详细讲解+代码+操作效果...

什么是Vue的生命周期？

Vue的生命周期指的是 从new Vue({}) 实例创建 ——>运行——>销毁期间运行的一些事件这些事件统称为生命周期。 

什么是生命周期钩子函数？

Vue的生命周期钩子函数就是 Vue生命周期从创建到销毁之间的事件别名 

生命周期分类：

一.创建期间的生命周期

1.beforeCreate：当Vue实例被我们创建好后 将会走Vue的第一个生命周期(beforeCreate)这时el挂载点和data数据 以及methods方法 还没有初始好
代码：

//HTML代码
<div id="root">
        <p>{{msg}}</p>
</div>

//Vue.js 代码
new Vue({
        el: "#root",
        data: {
            msg: "123"
        },
        //1.创建完将会执行第一个生命周期函数(beforeCreate)
        //这时还没有初始好 el挂载点和data数据 以及methods方法 所以再次调用可以看到undefined
        beforeCreate() {
            //调用data中的数据 会显示 undefined
            console.log(this.msg)
            //调用方法 会报错(还未初始化)
            this.add()
            //使用debugger来进行调试查看
            debugger
        },
        methods: {
            add() {
                console.log(this.msg)
            },
        }
    })

效果： 

调试的时候我们可以明显的看到 HTML页面中还未加载data中的数据 以及控制台打印的 data数据为undefined 我们调用的方法也会报错 

2.created:第一个生命周期执行完后会执行第二个生命周期(created) 这时的data数据和methods方法都已经初始化好了，这也是想要调用data数据和调用方法最早能操作的地方 但是HTML视图中的data数据还未渲染
代码:

//HTML代码
<div id="root">
        <p>{{msg}}</p>
</div>

//Vue.js代码
 // 创建Vue实例对象
    new Vue({
        el: "#root",
        data: {
            msg: "123"
        },
        //2.执行第二个生命周期(created)
        //data和methods都已经初始化好了 如果想要调用方法以及data数据最早只能在created中操作            
        //但是视图中的html并没有渲染出来
        created() {
            // 调用数据 会现实msg数据(123)
            console.log(this.msg)
            //调用方法 会现实方法中打印的值(123)
            this.add()
            //data中的数据还未渲染到html中 ({{msg}})
            console.log(document.querySelector('p').innerHTML)
            //进行调试
            debugger
        },
        methods: {
            add() {
                console.log(this.msg)
            },
        }
    })

效果: 

在调试的时候 可以明显的看出我们的HTML页面还未渲染 但是控制台中的data数据以及方法可以正常显示以及调用了 我们获得的DOM节点也是Vue的占位符 
 

二.运行期间的生命周期 

3.beforeMount:第三个生命周期(beforeMount)  这个生命周期是我们运行期间的第一个生命周期,这时el挂载点已经初始化完成但是data数据还尚未将数据渲染到页面中(已经存储在Dom内存中) 页面中的元素还没有被真正的替换，依旧是Vue的占位数(插值表达式) 

代码:

//HTML 代码
<div id="root">
        <p>{{msg}}</p> <button @click="dian">点击更换</button>
</div>

//Vue.js代码
 //3.执行第三个生命周期(beforeMount) 
        //data数据已经在内存中编译完成但是还尚未把数据渲染到页面中 页面中的元素还没有被真正替换     
        //依旧是Vue的占位符({{msg}})
        beforeMount() {
            // 调用数据 会现实msg数据(123)
            console.log(this.msg)
            //调用方法 会现实方法中打印的值(123)
            this.add()
            //data中的数据还未渲染到html中 ({{msg}})
            console.log(document.querySelector('p').innerHTML)
        },

 效果:


这时我们的data(控制台也可以拿到)数据已经在内存中生成一个编译好的模板字符串然后把这个模板宇符串渲染为 内存中的DOM此时只在內存中我们已经将模板渲染好了但是并没有把模板挂载到真正的Html页面中

4.mounted：从beforeMount我们可以得知 beforeMount已经在内存中渲染好了一个模板 在执行mounted生命周期函数的时候 就将这个准备就绪的模板渲染相应的挂载点中(el) 此时的用户也可以看到页面渲染的效果了
代码：

//HTML代码
<div id="root">
        <p>{{msg}}</p>
</div>
//Vue代码
 new Vue({
        el: "#root",
        data: {
            msg: "123"
        },
        //4.执行第四个生命周期(mounted) 
        //内存中的模板已经挂载(渲染)到页面中 用户也已经可以看到渲染好的页面 当执行完mounted就 
        //表示实例已经完全被创建好了 如果没有其他操作这个实例将会一直存在
        mounted() {
            // 调用数据 会现实msg数据(123)
            console.log(this.msg)
            //调用方法 会现实方法中打印的值(123)
            this.add()
            //data中的数据已经渲染到html中 (123)
            console.log(document.querySelector('p').innerHTML)
            debugger
        },
        methods: {
            add() {
                console.log(this.msg)
            },
        }
    })

 效果：

在运行调试的时候我们也能清楚的看到 页面中的数据也已经不再是Vue的占位符了 而是我们data中的数据 在mounted中我们可以做一些请求发送(ajax、axios...)等 可以将数据直接渲染到页面中当mounted生命周期执行完后表示实例已经完全被创建好了 如果没有其他操作(如data数据更改)的话 这个实例就会一直存在

2.2.数据更改时触发的生命周期函数 

在我们更改data数据的时候 这时也会触发 运行期间的两个生命周期函数  我们现在已经知道在执行到mounted的时候我们的我们的Vue实例已经被完全创造好了 但是如果有其他操作这时会触发更改时的生命周期函数 ：

5.beforeUpdate：当数据发生改变的时候将会触发beforeUpdate生命周期函数 因为我们更改了数据就要重新再次渲染一遍新的数据到页面中把旧的数据给替换掉 beforeUpdate生命周期函数会将新的数据储存到内存中 这时我们的页面数据依旧是旧的数据 但是我们在Vue中去调用data数据将会拿到最新的值 就类似 我们从网上购买一个东西 我们要经过快递的寄送才能拿到这个商品 beforeUpdate生命周期函数 我们也可以这样理解 要通过重新编译再去渲染到页面中
代码：

//HTML代码 tip:为了能够详细的查看 我在这边加了个单击事件按钮
<div id="root">
        <p>{{msg}}</p>
          <!-- 添加一个单击事件 可以看到运行的一个过程 -->
          <button @click="add">点击查看</button>
</div>

//Vue代码
 // 创建Vue实例对象
    new Vue({
        el: "#root",
        data: {
            msg: "123"
        },
        //当data数据发生改变时 触发的生命周期(beforeUpdate)
        //当函数执行的时候 页面中实现的数据还是旧的 但是data中的数据是最新的 页面尚未和最新的数     
        //据保持同步
        //点击按钮的时候 会调用这个函数
        beforeUpdate() {
            //当点击按钮 获得页面中的数据 (123)
            console.log(document.querySelector('p').innerHTML)
            //data中的数据(234)
            console.log(this.msg)
            debugger
        },
        methods: {
            add() {
                //单击的时候 更改data数据中的msg
                this.msg="我爱Vue"
                //调用beforeUpdate函数
                this.beforeUpdate
            },
        }
    })

效果： 

这里大家直接看控制台就好了 控制台中我们的data数据已经发生改变了(我爱Vue)  但是我们的DOM节点中的数据还是之前旧的data数据(123)

6.updated:通过beforeUpdate生命周期函数我举的例子可以了解到 当我们编译好后 才会将最新的数据渲染到页面中,这时也就完成了从 data(Mode1层)-view(视图层)的数据更新 这里我们可以通过事件触发更改数据来详细的查看
代码：

 //HTML代码
  <div id="root">
        <p>{{msg}}</p>
          <!-- 添加一个单击事件 可以看到运行的一个过程 -->
          <button @click="add">点击查看</button>
  </div>

 //Vue 代码
 //当beforeUpdate生命周期执行完后 执行的生命周期(updated)
        //当前事件执行的时候 页面和data数据已经保持同步了 页面中的数据也是最新的
        updated() {
            //当点击按钮 获得页面中的数据 (234)
            console.log(document.querySelector('p').innerHTML)
            //data中的数据(234)
            console.log(this.msg)
            debugger
        },

效果:

当我们单击按钮的时候触发单击事件在通过debugger可以看到在我们单击按钮的时候页面已经渲染好了 我们获得的DOM节点和data数据也是最新的数据了 

三.销毁期间的生命周期函数

销毁期间的生命周期函数 我们可以理解为 当你关闭这个页面或者一些手动销毁的时候 我们这个页面中的数据 指令 过滤器 方法... 就让他biu一下 消失了 在此我们在销毁的时候也会触发两个生命周期函数：
7.beforeDestroy:当我们关闭或手动销毁的时候 我们会触发第一个销毁期间的生命周期函数 当执行beforeDestroy的时候 Vue实例已经从运行阶段进入销毁阶段 实例上所有的data和所有的methods以及过滤器指令 都处于可用状态还没有真正执行销毁过程 

8.destroyed：执行完beforeDestroy生命周期函数就会执行我们的destroyed生命周期函数，这时组件已经被完全销毁了此时 组件中所有的数据 方法 指令.... 都已经不可用了 

下面我还整理了一个 Vue的从创建到销毁的一个过程(图片可以从官方拿到):

 如有不对请各位程序猿及时指出🫣🫣🫣🫣