Weex - Vue单页面的生命周期

(注:在iOS上测试)

先上代码:

<template>
    <div @viewappear="viewappear"  @viewdisappear="viewdisappear">
        <div class="box" @click="clickBox"></div>
        <text class="text">{{name}}</text>
    </div>
</template>
<script>

    import NavBar from '../lbase/NavigationBar.vue';
    import globar from '../../json/global.js';
    Vue.use(globar);
    var navigator = weex.requireModule('navigator');
    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: {

            viewappear () {
                console.log('viewappear')
            },
            viewdisappear () {
                console.log('viewdisappear')

            },
            clickBox(){
                this.name='bbbbbb';
            }, 
        },
        data(){
            return {
                 name:"aaaaaa",
            }
        },
    }
</script>
<style scoped>
    .box {
        border-width: 2px;
        border-style: solid;
        border-color: #BBB;
        width: 250px;
        height: 250px;
        margin-top: 250px;
        margin-left: 250px;
        background-color: #EEE;
    }
    .text{
        margin-top: 40px;
        size: 40px;
        font-weight: bold;
        width: 750px;
        color: #006699;
        text-align: center;
    }

</style>

操作流程

1.从上一个面push到该页面

先执行beforeCreate（页面创建前），然后执行created（页面已经创建，相当于iOS vc的viewDidLoad）。然后执行beforeMount，mounted，将实例挂载到dom上。接下去执行viewappear,相当于iOS里的viewWillAppear。与其对应的是viewdisappear，这2个其实都不属于vue的生命周期的一部分，而是weex SDK扩展出来的，weex官网的通用事件有介绍，https://weex.apache.org/cn/references/common-event.html

QQ20171209-105413@2x.png

2.点击页面上的方框，下面的文字由aaaaaa变成bbbbbb。组件更新了，这个时候执行beforeUpdate，然后是updated。

3.点击返回按钮。

也就是页面即将消失，先执行viewdisappear（相当于iOS里的viewWillDisappear），再是页面被销毁，依次执行beforeDestroy和destroyed。

************************** 分割线 **************************

另外

上面的顺序是 A push 到 B，B再pop回A的情况，（B即为文章开始vue代码所绘制的页面）。

如果这时候从B再push到C，再从C返回，依次会执行**viewdisappear，viewappear。因为B页面还在堆栈中，也就不会执行destroyed，这也就是iOS导航控制器的逻辑原理。

************************** 分割线 **************************

打印log如下：

QQ20171209-104238@2x.png