生命周期

TIP

除了自有的生命周期钩子以外,eeui还支持的原生生命周期回调lifecycle,含:页面挂载、页面恢复、页面暂停。

<template>
	<div @lifecycle="lifecycle">
		...
	</div>
</template>

<script>

    export default {
	    beforeCreate: function (){
	        console.log('beforeCreate');
	    },
	    created: function () {
	        console.log('created');
	    },
	    beforeMount: function () {
	        console.log('beforeMount');
	    },
	    mounted: function () {
	        console.log('mounted');
	    },
	    beforeUpdate: function () {
	        console.log('beforeUpdate');
	    },
	    updated: function () {
	        console.log('updated');
	    },
	    beforeDestroy: function () {
	        console.log('beforeDestroy');
	    },
	    destroyed: function () {
	        console.log('destroyed');
	    },
	    methods: {
	        //生命周期回调
	        lifecycle(e){
	            console.log(e.status);
	            if (e.status == 'ready')
	            {
                    console.log('页面挂载(初始化)');
	            }
	            else if (e.status == 'resume') 
	            {
                    console.log('页面激活(恢复)');
	            }
	            else if (e.status == 'pause') 
	            {
                    console.log('页面失活(暂停)');
                }
	        }
	    }
  }
</script>

生命周期钩子

Vue 组件的实例生命周期钩子将在特定的阶段发出,详情请参考 Vue 组件的生命周期图示

Vue 生命周期钩子 是否支持 说明
beforeCreate 支持 -
created 支持 -
beforeMount 支持 -
mounted 支持 详见下文解释
beforeUpdate 支持 -
updated 支持 -
activated 不支持 不支持<keep-alive>
deactivated 不支持 不支持<keep-alive>
beforeDestroy 支持 -
destroyed 支持 -
errorCaptured 支持 -

关于 "mounted" 生命周期

和浏览不同的是,eeui 的渲染流程是异步的,而且渲染出来的结果都是原生系统中的 View,这些数据都无法被 javascript 直接获取到。因此在 eeui 上,Vue 的 mounted 生命周期在当前组件的 virtual-dom (Vue 里的 VNode) 构建完成后就会触发,此时相应的原生视图未必已经渲染完成。