uniapp里的mounted_uni-app 生命周期函数执行顺序

2024-04-25 14:07:56

{{message}}

点击

import {

mapState,

mapMutations

} from 'vuex';

var key = 0;

export default {

data() {

return {

message: 1

}

},

computed: {

},

methods: {

addMsg() {

this.message++

}

},

beforeCreate() {

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)

},

onLoad() {

console.group('onLoad 状态===============》');

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 状态===============》');

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 状态===============》');

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 状态===============》');

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 组件创建完毕状态===============》');

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 组件挂载之前状态===============》');

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 组件挂载完毕状态===============》');

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 组件更新之前状态===============》');

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 组件更新完毕状态===============》');

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 组件销毁之前状态===============》');

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 组件销毁完毕状态===============》');

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)

}

}

.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;

}

}

屏幕快照 2019-07-16 上午11.11.14.png

当点击按钮时

屏幕快照 2019-07-16 上午11.24.36副本.png

总结

Page页面生命周期函数执行顺序

beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted

刷新数据后

beforeUpdate => updated

uniapp里的mounted_uni-app 生命周期函数执行顺序相关推荐

Android生命周期函数执行顺序
转载自:http://blog.csdn.net/intheair100/article/details/39061473 程序正常启动:onCreate()->onStart()->on ...
vue所有页面刷新一次mounted(以及所有生命周期函数)执行两次的解决方法
刚开始我发现页面每刷新一次,接口都请求两次,我以为是因为axios发送OPTIONS预检请求,但是我发现两次请求都是正常的get或者是post请求,并且只有在页面刷新的时候请求才触发两次,点击查询或者 ...
React生命周期执行顺序详解
文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...
Vue父子组件及mixins生命周期执行顺序
图为Vue生命周期生命周期分别为 1. 创建前后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象Data都为undefined,还未初始化.created阶段,vue实例的 ...
vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...
vue父子组件生命周期执行顺序_关于Vue组件的生命周期及执行顺序
本文主要讲述了:Vue组件渲染时的生命周期及执行顺序 Vue组件数据变更时的生命周期及执行顺序 Vue组件嵌套时的生命周期及执行顺序正文组件渲染时的生命周期在组件渲染时,每个Vue组件都有4个生 ...
父子组件的生命周期执行顺序
父子组件的生命周期执行顺序 1.父子组件的生命周期运行顺序根据在其对应的钩子函数中的打印日志可得到如下顺序: 父beforeCreate-> 父create -> 子beforeCreat ...
Vue组件嵌套时生命周期函数触发顺序是什么？
使用过Vue的大家,对于生命周期一定都很熟悉,在官方文档一开始,就给我们介绍了Vue的生命周期有哪些,是怎么样的顺序.这个难不倒大家. 但如果是问当组件嵌套时,父子组件的生命周期函数触发的顺序是什么样 ...
vue父子组件生命周期执行顺序
生命周期: 一个组件从创建到销毁的整个过程就是生命周期. 生命周期函数(钩子函数): vue框架内置函数,随着组建的生命周期,自动按次序执行. beforeCreate:创建实例之前执行,元素和数据都 ...

最新文章

热门文章