生命周期

2.3.8版本之前请参考这里

TIP

除了自有的生命周期钩子以外,
eeui还另外支持APP进入后台APP进入前台页面挂载页面激活页面失活页面停止

<template>
	...
</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');
	    },

        appActive: function (data) {
            console.log('APP进入前台:App从【后台】切换至【前台】时触发');
        },
        appDeactive: function (data) {
            console.log('APP进入后台:App从【前台】切换至【后台】时触发');
        },
        pageReady: function (data) {
            console.log('页面挂载:页面【渲染完成】时触发');
        },
        pageResume: function (data) {
            console.log('页面激活:页面【恢复】时触发(渲染完成时也会触发1次)');
        },
        pagePause: function (data) {
            console.log('页面失活:页面【暂停】时触发');
        },
        pageDestroy: function (data) {
            console.log('页面停止:页面【销毁】时触发');
        }
    }
</script>

生命周期钩子

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

Vue 生命周期钩子 是否支持 说明
beforeCreate (opens new window) 支持 -
created (opens new window) 支持 -
beforeMount (opens new window) 支持 -
mounted (opens new window) 支持 详见下文解释
beforeUpdate (opens new window) 支持 -
updated (opens new window) 支持 -
activated (opens new window) 不支持 不支持<keep-alive>
deactivated (opens new window) 不支持 不支持<keep-alive>
beforeDestroy (opens new window) 支持 -
destroyed (opens new window) 支持 -
errorCaptured (opens new window) 支持 -
以下是eeui特有:
appActive 支持 APP进入前台:App从【后台】切换至【前台】时触发
appDeactive 支持 APP进入后台:App从【前台】切换至【后台】时触发
pageReady 支持 页面挂载:页面【渲染完成】时触发
pageResume 支持 页面激活:页面【恢复】时触发(渲染完成时也会触发1次)
pagePause 支持 页面失活:页面【暂停】时触发
pageDestroy 支持 页面停止:页面【销毁】时触发

关于 "mounted" 生命周期

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