The official documentation

Life cycle diagram

The debugger to debug

Code sample

<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>
Copy the code

conclusion

beforeCreate

  • After instance initialization, data Observer and Event/Watcher events are called before configuration
  • This. data and this.$el do not have values yet, so they are undefined and can be initialized

created

  • Called before the template is rendered into HTML, usually initializing some property values before rendering into a view
  • Variables in props and data can also be accessed (all initialized)
  • Variables in computed can be accessed if they depend on variables in data and props. Otherwise, it cannot be accessed
  • this.$el -> undefined

beforeMount

  • Called before the mount begins: The associated render function is called for the first time

mounted

  • Called after the instance is mounted, when el is replaced by the newly created vm.el. If the root instance is mounted to an element within a document, vm. El replaces Mounted when it is called. If the root instance is mounted to an element within a document, vm. El replaces Mounted when it is called. If the root instance is mounted to an element in a document, vm. El is also in the document when Mounted is called.
  • The virtual node has been rendered as a real DOM node. This. el can be accessed and dom initialization operations can be performed. It does not promise that all child components will be mounted together. If you want to wait until the entire view is rendered, you can use vm.el inside Mounted to initialize the DOM. However, you do not promise that all children of Mounted components will be mounted at once. If you want to wait until the entire view is rendered, you can use vm.el inside Mounted to initialize the DOM. However, you do not promise that all children of Mounted components will be mounted at once. If you want to wait until the entire view is rendered, you can use vm.nextTick inside Mounted