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