uni-app中mounted 在wx小程序生命周期哪个阶段

文章目录

    • 页面切换的生命周期
      • 案例描述
      • 结论
    • v-if 和 v-show 触发组件的生命周期函数
      • 案例(自定义组件的)
      • 结论

页面切换的生命周期

案例描述

  1. 第一次进入A 页面

B页面执行 onload onshow mounted

  1. 使用 navigateTo 由A 进入 B 页面

A 页面执行 onHide 方法
B 页面执行 onload onshow mounted

  1. 再有B 回退到A 页面

B 页面执行 onHide 方法
A 页面执行 onload onshow mounted

结论

  1. [小程序页面切换生命周期](wx小程序路由(打开新页面、页面重定向、Tab 切换))
  2. uni-app 的mounted生命周期触发是在 onshow函数后面执行的

v-if 和 v-show 触发组件的生命周期函数

在vue组件中添加了

案例(自定义组件的)

export default {
	data() {
		return {
		};
	},
	onLoad: function() {
		console.log('visitor onLoad');
	},
	onShow: function() {
		console.log('visitor onShow');
	},
	mounted: function() {
		console.log('visitor mounted');
	},
	onHide: function() {
		console.log('visitor onHide');
	},
	// 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
	attached: function() {
		// 在组件实例进入页面节点树时执行
		console.log('visitor attached');
	},
	detached: function() {
		// 在组件实例被从页面节点树移除时执行
		console.log('visitor detached');
	},
	lifetimes: {
		attached: function() {
			// 在组件实例进入页面节点树时执行
			console.log('visitor attached');
		},
		detached: function() {
			// 在组件实例被从页面节点树移除时执行
			console.log('visitor detached');
		},
	}
}

结论

使用v-if创建或者删除组件,发现只会调用mounted里面的方法,onload 、onshow、onHide、attached、detached 方法全部不会执行

你可能感兴趣的:(微信小程序,uni-app,hbuildx)