Vue单组件与父子组件的生命周期

单个组件的生命周期

现根据实际代码执行情况分析:

单组件

        更新 {{dataVar}}

        销毁


export default {

    data() {

        return {

            dataVar: 1

        }

    },

    beforeCreate() {

        this.compName = 'single'

        console.log(`--${this.compName}--beforeCreate`)

    },

    created() {

        console.log(`--${this.compName}--created`)

    },

    beforeMount() {

        console.log(`--${this.compName}--beforeMount`)

    },

    mounted() {

        console.log(`--${this.compName}--mounted`)

    },

    beforeUpdate() {

        console.log(`--${this.compName}--beforeUpdate`)

    },

    updated() {

        console.log(`--${this.compName}--updated`)

    },

    beforeDestroy() {

        console.log(`--${this.compName}--beforeDestroy`)

    },

    destroyed() {

        console.log(`--${this.compName}--destroyed`)

    },

    methods: {

        handleDestroy() {

            this.$destroy()

        }

    }

}

初始化组件时,打印:

当data中的值变化时,打印:

当组件销毁时,打印:

从打印结果可以看出:

初始化组件时,仅执行了beforeCreate/Created/beforeMount/mounted四个钩子函数

当改变data中定义的变量(响应式变量)时,会执行beforeUpdate/updated钩子函数

当切换组件(当前组件未缓存)时,会执行beforeDestory/destroyed钩子函数

初始化和销毁时的生命钩子函数均只会执行一次,beforeUpdate/updated可多次执行

父子组件的生命周期

将单组件作为基础组件(由于props在beforeCreate()中未初始化),需要做如下更改:

props: {

    compName: {

        type: String,

        default: 'single'

    }

},

beforeCreate() {

    // this.compName = 'single'

    // console.log(`--${this.compName}--beforeCreate`)


    console.log(` --data未初始化--beforeCreate`)

},

父组件代码如下:

    

        

复杂组件

        


const COMPONENT_NAME = 'complex'


import LifecycleSingle from './LifeCycleSingle'


export default {

    beforeCreate() {

        console.log(`--${COMPONENT_NAME}--beforeCreate`)

    },

    created() {

        console.log(`--${COMPONENT_NAME}--created`)

    },

    beforeMount() {

        console.log(`--${COMPONENT_NAME}--beforeMount`)

    },

    mounted() {

        console.log(`--${COMPONENT_NAME}--mounted`)

    },

    beforeUpdate() {

        console.log(`--${COMPONENT_NAME}--beforeUpdate`)

    },

    updated() {

        console.log(`--${COMPONENT_NAME}--updated`)

    },

    beforeDestroy() {

        console.log(`--${COMPONENT_NAME}--beforeDestroy`)

    },

    destroyed() {

        console.log(`--${COMPONENT_NAME}--destroyed`)

    },

    components: {

        LifecycleSingle

    }

}

初始化组件时,打印:

当子组件data中的值变化时,打印:

当父组件data中的值变化时,打印:

当props改变时,打印:

当子组件销毁时,打印:

当父组件销毁时,打印:

从打印结果可以看出:

仅当子组件完成挂载后,父组件才会挂载

当子组件完成挂载后,父组件会主动执行一次beforeUpdate/updated钩子函数(仅首次)

父子组件在data变化中是分别监控的,但是在更新props中的数据是关联的(可实践)

销毁父组件时,先将子组件销毁后才会销毁父组件



文章摘选自:微信公众号,前端大全

推荐阅读更多精彩内容

  • vue生命周期简介 图片发自简书App 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 ...
    F_imok阅读 467评论 0 1
  • vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。 生命周期探究 对于执...
    余生LHX阅读 604评论 0 3
  • 生命周期 在vue中生命周期大的分为4个阶段 create 创建 - 创建vue实例并初始化 mount 挂载 -...
    一刀一个小黄鱼阅读 554评论 0 50
  • 忆起年少时下雪,一见雪影子大家都很兴奋,全然忘记了寒冷,而那时学校通常就会放假.刚上初中那年冬天的一个中午,开...
    卷耳的秋天阅读 509评论 0 0
  • 秦成是我的高三同学,司阳县人氏。在我眼里他是思想家,哲学家,说出来的话,总是闪耀着怡情理性的智者光辉。作为我的精神...
    白博生阅读 235评论 0 0
  • 画的时候其实挺迷茫的,只知道一层层颜色在加深,不知道会画成什么样子,一遍遍的刷水,中间还刷糊了一次。上半部天空最后...
    我是你的鹹檸檬阅读 229评论 1 4