前言(没什么用别看了)

所谓生命周期，就是vue实例从创建到销毁所经历的一系列过程，掌握生命周期能帮我们更好的了解vue的设计思想，也更方便debug。

vue为我们提供了一系列钩子函数，方便我们在各阶段进行操作，本文也先从这些钩子函数说起。

Demo

我们创建一对父子组件，并通过观察子组件的创建过程，来了解生命周期的变化。

父组件

<template>
    <div id="app">
        <header>我是父组件</header>
        <button @click="show=true">点我创建子组件</button>
        <br/>
        <child v-if="show" proptest="属性值"></child>
    </div>
</template>

<script>
    import child from "@/components/child";

    export default {
        name: 'App',
        data() {
            return {
                show: false
            }
        },
        components: {
            child
        },

    }
</script>

<style>
    #app{
        text-align: center;
        background-color: aquamarine;
    }
</style>

子组件

<template>
    <div style="background-color: #6495ed">
        <header>我是子组件</header>
        <span>{{year}}</span>
        <button @click="changeTime">时光机</button>
        <br/>
        <button @click="destroy">点我销毁子组件</button>
    </div>
</template>

<script>
    export default {
        name: "child",
        data() {
            return {
                year: '现在是2020年'
            }
        },
        props: ['proptest'],
        methods: {
            changeTime() {
                this.year === '大人，时代变了' ? this.year = '现在是2020年' : this.year = '大人，时代变了'
            },
            methodsAvailable() {

            },
            destroy(){
                this.$destroy()
            }
        },
        computed: {
            time() {
                return Date.now()
            }
        },
        beforeCreate() {
            console.log('------------start-------------')
            console.log('当前是beforeCreate')
            console.log('this', this)
            console.log('el', this.$el)
            console.log('data', this.$data)
            console.log('prop', this.$props)
            console.log('watch', this._watchers)
            console.log('methods', this.methodsAvailable)
            console.log('computed', this.time)
            console.log('year', this.year)
            console.log('------------end-------------')
            console.log('')
        },
        created() {
            console.log('------------start-------------')
            console.log('当前是created')
            console.log('el', this.$el)
            console.log('data', this.$data)
            console.log('prop', this.$props)
            console.log('watch', this._watchers)
            console.log('methods', this.methodsAvailable)
            console.log('computed', this.time)
            console.log('year', this.year)
            console.log('------------end-------------')
            console.log('')
        },
        beforeMount() {
            console.log('------------start-------------')
            console.log('当前是beforeMount')
            console.log('el', this.$el)
            console.log('data', this.$data)
            console.log('year', this.year)
            console.log('------------end-------------')
            console.log('')
        },
        mounted() {
            console.log('------------start-------------')
            console.log('当前是mounted')
            console.log('el', this.$el)
            console.log('data', this.$data)
            console.log('year', this.year)
            console.log('------------end-------------')
            console.log('')

        },
        beforeUpdate() {
            console.log('------------start-------------')
            console.log('当前是beforeUpdate')
            console.log('el', this.$el.innerHTML)
            console.log('data', JSON.stringify(this.$data))
            console.log('year', this.year)
            console.log('------------end-------------')
            console.log('')
        },
        updated() {
            console.log('------------start-------------')
            console.log('当前是updated')
            console.log('el', this.$el.innerHTML)
            console.log('data', JSON.stringify(this.$data))
            console.log('year', this.year)
            console.log('------------end-------------')
            console.log('')
        },
        beforeDestroy() {
            console.log('------------start-------------')
            console.log('当前是beforeDestroy')
            console.log('el', this.$el)
            console.log('data', this.$data)
            console.log('year', this.year)
            console.log('------------end-------------')
            console.log('')
        },
        destroyed() {
            console.log('------------start-------------')
            console.log('当前是destroyed')
            console.log('el', this.$el)
            console.log('data', this.$data)
            console.log('year', this.year)
            console.log('watch', this._watchers)
            console.log('methods', this.methodsAvailable)
            console.log('computed', this.time)
            console.log('------------end-------------')
            console.log('')
        }
    }
</script>

<style scoped>

</style>