在介绍Vue生命周期之前有必要先讨论一下钩子函数（hooks）钩子钩子这事情需要相对的理解，直白点说，它也只是一些函数而已。但是把一些指定情况的函数组合成一个链条，就像描述一个动作的开始到结束的过程，亦或者是一个人的出生到死亡的过程。钩子函数的作用就是记录这个过程中的一些重要的细化的动作。只不过是一些特定状态下的函数。Vue的生命周期及钩子只看官方对Vue的生命周期的描述很难把这个事情理解透彻，下面我把官方的生命周期图转换成另外一种描述的图下面是转换后的生命周期图<!DOCTYPEhtml><html><head><title>钩子函数</title><metacharset="utf-8"><scriptsrc="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script><body><divid="app"><p>{{message}}</p><inputtype="button"@click="change"value="更新数据"/><inputtype="button"@click="destroy"value="销毁"/></div><scripttype="text/javascript">varvm=newVue({el:'#app',data:{message:"WelcomeVue"},methods:{change(){this.message='Daturaisme';},destroy(){vm.$destroy();}},beforeCreate:function(){console.group('beforeCreate创建前状态===============》');console.log("%c%s","color:red","el:"+this.$el);//undefinedconsole.log("%c%s","color:red","data:"+this.$data);//undefinedconsole.log("%c%s","color:red","message:"+this.message);//undefined},created:function(){console.group('created创建完毕状态===============》');console.log("%c%s","color:red","el:"+this.$el);//undefinedconsole.log("%c%s","color:green","data:"+this.$data);//[objectObject]=>已被初始化console.log("%c%s","color:green","message:"+this.message);//WelcomeVue=>已被初始化},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>created和mounted的区别beforecreated：el和data并未初始化created:完成了data数据的初始化，el没有beforeMount：完成了el和data初始化mounted：完成挂载updated这个钩子函数主要负责处理：当我们单击页面中的“更新数据”按钮，将数据更新。就能看到data里的值被修改后，这时将会触发update的操作。destoryed销毁生命周期，当执行完destoryed以后当前页面就不会再受Vue的任何影响。再实际操作过程中，可能使用的相对比较少，因为貌似很难停止页面的操作小结一下beforecreate:举个栗例子：可以在这加个loading事件created：在这结束loading，还做一些初始化，实现函数自执行mounted：在这发起后端请求，拿回数据，配合路由钩子做一些事情beforeDestory：你确认删除XX吗？destoryed：当前组件已被删除，清空相关内容生命周期需要相对的理解和体会，才能准确判定在什么情况下去使用哪个钩子函数。
实现该项参数的获取要考虑以下几个方面的事情：1.浏览器是否满足ES5及ES6的问题2.要熟悉WEBAPI的一些内置函数及对象，如：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/locationfunctionloadPageVar(sVar){returndecodeURI(window.location.search.replace(newRegExp("^(?:.*[&\\?]"+encodeURI(sVar).replace(/[\.\+\*]/g,"\\$&")+"(?:\\=([^&]*))?)?.*$","i"),"$1"));}console.log('路由URL：'+location)console.log('路由URL参数：'+loadPageVar("logintype"))本次总结如下：
涉及工具软件：HBuilder软件最新版VisualStudioCode手机一部（推荐安卓，亲测锤子手机）商米收银机一台谷歌浏览器VueCli脚手架第一步：将做好的Vue前端进行Build命令发布重点路径问题：因为正常Vue内调试的时候使用的publicPath=‘/’（注意publicPath的默认值就是/）,但是打包成app以后需要变换成相对路径（./）,即publicPath=‘./’，否则会发生所有资源全部找不到错误提示。API接口数据传输问题：正常的Vue跨域在这里的不起作用的，需要手动更改配置文件中API接口前缀，并附带接口跨域网址，如下图所示第二步：将发布后的文件在HBuilder中导入，并将W模式转换成A模式主要是要生成manifest.json文件，并进行APP发布的各项参数配置第三步：先连接真机（安卓的）进行测试确保真机状态下无任何问题（注意：此处一般会产生的问题是路径错误或者API请求连接错误）第四步：发布打包app安卓和IOS都可以，亲测安卓、IOS均没有问题第五步：安装应用体验功能，测试数据完整度。