<template>
<view ref="ref" class="test-container">
<text>{{message}}</text>
<button @click="addMsg">點(diǎn)擊</button>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
var key = 0;
export default {
data() {
return {
message: 1
}
},
computed: {
},
methods: {
addMsg() {
this.message++
}
},
beforeCreate() {
console.group('beforeCreate 組件創(chuàng)建之前狀態(tài)===============》');
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)
},
onLoad() {
console.group('onLoad 狀態(tài)===============》');
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)
},
onShow() {
console.group('onShow 狀態(tài)===============》');
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)
},
onReady() {
console.group('onReady 狀態(tài)===============》');
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)
},
onUnload() {
console.group('onUnload 狀態(tài)===============》');
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() {
console.group('created 組件創(chuàng)建完畢狀態(tài)===============》');
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);
},
beforeMount() {
console.group('beforeMount 組件掛載之前狀態(tài)===============》');
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);
},
mounted() {
console.group('mounted 組件掛載完畢狀態(tài)===============》');
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() {
console.group('beforeUpdate 組件更新之前狀態(tài)===============》');
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() {
console.group('updated 組件更新完畢狀態(tài)===============》');
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() {
console.group('beforeDestroy 組件銷毀之前狀態(tài)===============》');
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() {
console.group('destroyed 組件銷毀完畢狀態(tài)===============》');
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>
<style lang="scss">
.test-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 0upx 40upx;
button {
margin-top: 100upx;
}
}
</style>
屏幕快照 2019-07-16 上午11.11.14.png
當(dāng)點(diǎn)擊按鈕時(shí)
屏幕快照 2019-07-16 上午11.24.36副本.png
總結(jié)
Page頁(yè)面生命周期函數(shù)執(zhí)行順序
beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted
刷新數(shù)據(jù)后
beforeUpdate => updated
