Vue05-钩子函数有哪些含义

2021-10-06 22:01:23 阅读：151 来源： 互联网

标签：Vue05 el console log color 钩子含义 c% data

一.什么是vue的生命周期？

就是从Vue实例或者组件从创建到使用，最后销毁的这个过程叫做Vue的生命周期函数，也可以理解为生命周期函数就是Vue实例在某一个时间点会自动执行的函数。
在这里插入图片描述
上图转自：https://blog.csdn.net/aa327056812/article/details/113848734

二.vue的生命周期函数都有哪些，作用分别是哪些?

1.创建实例之前：BeforeCreate函数：
在Vue实例创建后触发，这个时候的this不能用，在data中的数据methods的方法，还有watch中的事件都获取不到。

2.创建实例之后：Created函数：
实例已经创建完成了，实例对象已经完成了，这时候可以访问 data中的数据以及 methods中的方法和 watch 中的事件了。
这个时候虽然已经可以使用到数据，也可以更改数据，但是在这里同步修改数据不会触发updated函数，一般可以在这里做初始数据的获取。

3.模板渲染之前：beforeMount：
在这个时期进行模板编译，但是没有元素挂载，无法获取DOM。并且在这个函数中虚拟dom已经创建完成，即将渲染。
在这里也可以修改数据，不会触发updated，这是在渲染之前最后一次更改数据的机会。

4.渲染之后：mounted:
挂载完毕，渲染出了真实的dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据，真实dom都已经处理完毕，一些对dom的操作这时候才可以进行。

5.更新数据之前：beforeUpdate
当组件或者实例的数据更改之后，会立即执行beforeUpdate，也就是说数据更新了，但是vue中的组件对应dom内部中的数据没有变，所以说叫做组件更新前。

6.更新数据之后：updated
组件更新完成之后的操作，Vue中的组件已经对应dom内部中的数据了，可以继续操作更新之后的dom。

7.销毁实例之前：beforeDestroy
当经过某种途经调用destroy（）方法之后，会立即执行beforeDestroy，一般在这里做一些善后的工作，比如清除计时器，清除非指令绑定的事件等，在这个时候实例还是可以用的。

8.销毁实例之后：destroyed
Vue实例销毁之后执行，Vue实例销毁之后，dom元素还存在，但是数据双向绑定，Vue的功能没有了，dom只剩下空壳。

三、Vue生命周期函数实现

如下这段代码展示了Vue的完整生命周期中各个时期的变化。
运行之后在Console查看状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>

    <div id="app">
        <p>{{ message }}</p>
        <input type="button" @click="change" value="更新数据" />
        <input type="button" @click="destroy" value="销毁" />
    </div>
    
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message : "Welcome Vue"
            },
            methods:{
                change() {
                    this.message = 'Datura is me';
                },
                destroy() {
                    vm.$destroy();
                }
            },
            beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el); //undefined
                console.log("%c%s", "color:red","data   : " + this.$data); //undefined
                console.log("%c%s", "color:red","message: " + this.message);//undefined
            },
            created: function () {
                console.group('created 创建完毕状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el); //undefined
                console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
                console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
            },
            beforeMount: function () {
                console.group('beforeMount 挂载前状态===============》');
                console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
                console.log(this.$el); // 当前挂在的元素
                console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:green","message: " + this.message); //已被初始化
            },
            mounted: function () {
                console.group('mounted 挂载结束状态===============》');
                console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
                console.log(this.$el);
                console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
                console.log("%c%s", "color:green","message: " + this.message); //已被初始化
            },
            beforeUpdate: function () {
                alert("更新前状态");
                console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
                console.log("%c%s", "color:green","el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:green","data   : " + this.$data);
                console.log("%c%s", "color:green","message: " + this.message);
                alert("更新前状态2");
            },
            updated: function () {
                console.group('updated 更新完成状态===============》');
                console.log("%c%s", "color:green","el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:green","data   : " + this.$data);
                console.log("%c%s", "color:green","message: " + this.message);
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red","data   : " + this.$data);
                console.log("%c%s", "color:red","message: " + this.message);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                console.log("%c%s", "color:red","el     : " + this.$el);
                console.log(this.$el);
                console.log("%c%s", "color:red","data   : " + this.$data);
                console.log("%c%s", "color:red","message: " + this.message)
            }
        })
    </script>
    </body>
    </html>

图1

图2

1.create和mounted
见图1
beforeCreated：el和data并未初始化。
created：完成了data数据的初始化，el没有。
beforeMount：完成了el和data的初始化。
mounted：完成了挂载。
见图2
我们还发现，在beforeMount阶段，el还是{{message}}，这里应用的是虚拟Dom技术，到后面mounted挂载的时候再把值渲染进去。

2.update
在这里插入图片描述
图3

图4

图5

见图4
点击更新按钮之后，触发beforeUpdate事件，此时，data的数据并未发生改变，而是view层的数据发生变化。
见图5
此处，页面中的文字已经发生了改变，说明Updated事件已经发生。

3.destroy

图6

见图6
销毁完成后，我们再改变message的值，vue就不会再响应了。但是原先的dom元素还存在。

标签：Vue05,el,console,log,color,钩子,含义,c%,data
来源： https://blog.csdn.net/qq_46801776/article/details/120629353

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue05-钩子函数有哪些含义

一.什么是vue的生命周期？

二.vue的生命周期函数都有哪些，作用分别是哪些?

三、Vue生命周期函数实现