vue 生命周期初探

时间 2019-12-12

标签 vue 生命周期初探繁體版

原文原文链接

vue 之后发之势加上其独有的特性（压缩后很小），轻量级的MVVM框架，目前github star已有5.94万，而react 7万。因而可知是两个很是热门前端框架。这里就vue的生命周期作个初步体验。javascript

发现看视频，动手以后，过段时间仍是会忘，因此写一篇短文以备不时之需。html

先附上官网的图片：vue生命周期前端

生命周期的钩子函数若是使用得当，会大大增长开发效率：vue

生命周期实践：java

为了更好的查看beforeUpdate.updated，beforeDestroy,destroy钩子函数，使用v-on绑定了点击事件，setTimeout定时5秒销毁实例，具体代码以下:react

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>Lifecycle</title>
　　　　<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
　　</head>
　　<body>
　　　　<div id="app">
　　　　　　<p v-on:click="getNew">点我</p>
　　　　　　<p >{{message}}</p>
　　　　</div>
　　　　<script type="text/javascript">
　　　　　　var app = new Vue({
　　　　　　　　el:'#app',
　　　　　　　　data:{
　　　　　　　　　　message:"the running boy"
　　　　　　　　},
　　　　　　　　methods:{
　　　　　　　　　　getNew:function(){
　　　　　　　　　　　　this.message = 'I have change';
　　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　beforeCreate:function(){
　　　　　　　　　　console.group("beforeCreate 建立前");
　　　　　　　　　　console.log("%c%s",'color:red','el :' + this.$el);
　　　　　　　　　　console.log("%c%s",'color:red','data :'+ this.$data);
　　　　　　　　　　console.log("%c%s",'color:red','message :' + this.message);
　　　　　　　　},
　　　　　　　　created:function(){
　　　　　　　　　　console.group("created 建立完毕");
　　　　　　　　　　console.log("%c%s", "color:grey","el : " + (this.$el));
　　　　　　　　　　console.log(this.$el);
　　　　　　　　　　console.log("%c%s", "color:grey","data : " + this.$data);
　　　　　　　　　　console.log("%c%s", "color:grey","message: " + this.message);
　　　　　　　　},
　　　　　　　　beforeMount:function(){
　　　　　　　　　　console.group("beforeMount 挂在以前");
　　　　　　　　　　console.log("%c%s", "color:blue","el : " + (this.$el));
　　　　　　　　　　console.log(this.$el);
　　　　　　　　　　console.log("%c%s", "color:blue","data : " + this.$data);
　　　　　　　　　　console.log("%c%s", "color:blue","message: " + this.message);
　　　　　　　　},
　　　　　　　　mounted:function(){
　　　　　　　　　　console.group("mounted 挂在结束状态");
　　　　　　　　　　console.log("%c%s", "color:grey","el : " + this.$el);
　　　　　　　　　　console.log(this.$el);
　　　　　　　　　　console.log("%c%s", "color:grey","data : " + this.$data);
　　　　　　　　　　console.log("%c%s", "color:grey","message: " + this.message);
　　　　　　　　},
　　　　　　　　beforeUpdate:function(){
　　　　　　　　　　console.group("beforeUpdate 更新状态以前");
　　　　　　　　　　console.log("%c%s", "color:blue","el : " + this.$el);
　　　　　　　　　　console.log(this.$el);
　　　　　　　　　　console.log("%c%s", "color:blue","data : " + this.$data);
　　　　　　　　　　console.log("%c%s", "color:blue","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('beforeDestory 销毁前状态');
　　　　　　　　　　console.log("%c%s", "color:grey","el : " + this.$el);
　　　　　　　　　　console.log(this.$el);
　　　　　　　　　　console.log("%c%s", "color:grey","data : " + this.$data);
　　　　　　　　　　console.log("%c%s", "color:grey","message: " + this.message);
　　　　　　　　},
　　　　　　　　destroyed:function(){
　　　　　　　　　　console.group('destroy 销毁以后');
　　　　　　　　　　console.log("%c%s", "color:grey","el : " + this.$el);
　　　　　　　　　　console.log(this.$el);
　　　　　　　　　　console.log("%c%s", "color:grey","data : " + this.$data);
　　　　　　　　　　console.log("%c%s", "color:grey","message: " + this.message);
　　　　　　　　}
　　　　　　});git

　　　　setTimeout(function(){
　　　　　　console.log("要销毁啦");
　　　　　　app.$destroy();
　　　　},5000);
　　　　/*app.$destroy();*/
　　</script>
　　</body>
</html>github

初次加载以后，查看console,看到以下：前端框架

建立以前，boforeCreate: data 和el 都为初始化，undefined。服务器

建立以后，created: data初始化，el仍未初始化。

挂载以前，beforeMount: data el 初始化，另外蓝色矩形框内能够看到，el内仍是{{message}},这里是应用Virtual DOM 技术，在mounted挂载时再渲染数据。

挂载以后，mounted: 完成挂载。

update

点击页面页面“点我”,可获得以下输出：

蓝色方框便是，看也看到点击事件已执行。

destroy

设置定时5秒销毁，销毁以后，点击事件无效。

这么多钩子函数，怎么使用呢？我也在探索中。。。

beforeCreate: 能够写loading事件。

creaded: 在结束loading,还作一些初始化，自执行函数。

mounted: 这里发起服务器请求。获得数据，配合路由作一些事情。

beforeDestroy: 删除组件以前提示，

destroyed: 当前组件已被删除，清空相关内容

本文只写了部分生命周期的基础知识，在后续的学习中会陆续更新。