vue生命周期详解

来源：互联网发布：java ftp 上传文件编辑：程序博客网时间：2024/06/06 05:33

肯定很多人看完这张图就懵逼了，什么意思啊？？？？？？？？？？？？？？？？？

我也不是很明白。所以看下面这张图。

生命周期，你可以理解为它的几个阶段，每个阶段都有相对应的钩子函数，每个函数的具体作用图上已经描述的很清楚了，如果还不懂，那就全部打印出来看一遍。

下面是扣过来的代码，直接复制出去执行以下。

<!DOCTYPE html><html><head>    <title></title>    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script></head><body><div id="app">     <p>{{ message }}</p></div><script type="text/javascript">      var app = new Vue({      el: '#app',      data: {          message : "xuxiao is boy"       },       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)          },        created: function () {            console.group('created 创建完毕状态===============》');            console.log("%c%s", "color:red","el     : " + this.$el); //undefined               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化                console.log("%c%s", "color:red","message: " + this.message); //已被初始化        },        beforeMount: function () {            console.group('beforeMount 挂载前状态===============》');            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); //已被初始化          },        mounted: function () {            console.group('mounted 挂载结束状态===============》');            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); //已被初始化         },        beforeUpdate: function () {            console.group('beforeUpdate 更新前状态===============》');            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);         },        updated: function () {            console.group('updated 更新完成状态===============》');            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);         },        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>

总结：

上面两张图和一堆代码，但是具体还是没讲有什么用处

beforecreate : 举个例子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory：你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

最后配上大牛地址：https://segmentfault.com/a/1190000008010666

感谢大牛的文章帮我解惑。

阅读全文

0 0