Vue2.x 生命周期

官方文档

生命周期图示

debugger调试

代码示例

<template>
    <div 
        ref="tableWrapper">
    </div>
</template>

<script>
import TableLayout from './table-layout';
import {
    createStore, 
} from './store/helper';
export default {
    props: {
        data: {
            type: Array,
            default: function() {
                return [];
            },
        },
        height: [String, Number],
    },
    data() {
        this.store = createStore(this, {});
        const layout = new TableLayout({
            store: this.store,
            table: this,
            align: 'left',
        });
        return {
            columns: [],
            layout,
        }
    },
    computed: {
        tableHeight() {
            if(this.height) {
                let height = parseInt(this.height, 10);
                return {
                    height: height ? height + 'px' : ''
                };
            }
            return {};
        },

        tableAlign() {
            const {align} = this.layout;
            return align || null;
        },
        
        tableWrapper() {
            return this.$refs.tableWrapper;
        },
    },
    watch: {
        data: {
            immediate: true,
            handler(value) {
                this.store.commit('setData', value);
            },
        }
    },
    methods: {
        beforeCreate() {
            debugger;
        },
        created() {
            debugger;
        },
        beforeMount() {
            debugger;
        },
        mounted() {
            debugger;
        },
        beforeUpdate() {
            debugger;
        },
        updated() {
            debugger;
        },
    }
}
</script>

生命周期

beforeCreate

• 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
• this.data 和 this.$el 都还没有值,为undefined, 可以进行一些初始化

created

• 在模板被渲染成html之前被调用, 即通常初始化某些属性值, 然后再渲染成视图
• props、data里面的变量也可以访问(均已完成初始化)
• computed中的变量, 如果依赖于data、props里面的变量, 则可以访问; 否则不可以访问
• this.$el -> undefined

beforeMount

• 在挂载开始之前被调用：相关的 render 函数首次被调用

mounted

• 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
• 虚拟节点已渲染成真实dom节点, this.$el 可以访问，可对dom进行初始化相关的操作，但不承诺 mounted 所有的子组件也都一起被挂载。如果希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick

单个组件的生命周期

beforeCreate->created->beforeMount->mounted->beforeDestroy->destroyed

嵌套组件的生命周期

父组件先创建，然后子组件创建（创建顺序十由外向内）；子组件先挂载，然后父组件挂载（挂载顺序是由内向外）

• 加载渲染过程：父beforeCreate -> 父 created -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父beforeMounted -> 父mounted ；
• 销毁过程： 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed；