Vue生命周期实例分析

发布时间:2022-06-24 09:21:24 作者:iii
来源:亿速云 阅读:155

这篇文章主要介绍“Vue生命周期实例分析”,在日常操作中,相信很多人在Vue生命周期实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue生命周期实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

生命周期:Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子

1. 生命周期钩子函数

下面这张图是vue生命周期各个阶段的执行情况:

Vue生命周期实例分析

Vue生命周期实例分析

注意:

完毕,可以用 vm.$nextTick

vue2.0之后主动调用$destroy()不会移除dom节点,作者不推荐直接destroy这种做法,如果实在需要这样用可以在这个生命周期钩子中手动移除dom节点

2. 单个组件的生命周期

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

<template>
    <div>
        <h4>单组件</h4>
        <el-button @click="dataVar += 1">更新 {{dataVar}}</el-button>
        <el-button @click="handleDestroy">销毁</el-button>
    </div>
</template>

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()
        }
    }
}

初始化组件时,打印:

Vue生命周期实例分析

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

Vue生命周期实例分析

当组件销毁时,打印:

Vue生命周期实例分析

从打印结果可以看出:

3. 父子组件的生命周期

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

props: {
    compName: {
        type: String,
        default: 'single'
    }
},

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

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

父组件代码如下:

<template>
    <div class="complex">
        <h4>复杂组件</h4>
        <lifecycle-single compName="child"></lifecycle-single>
    </div>
</template>


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
    }
}

初始化组件时,打印:

Vue生命周期实例分析

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

Vue生命周期实例分析

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

Vue生命周期实例分析

当props改变时,打印:

Vue生命周期实例分析

当子组件销毁时,打印:

Vue生命周期实例分析

当父组件销毁时,打印:

Vue生命周期实例分析

从打印结果可以看出:

4. 兄弟组件的生命周期

在上面的基础上,复杂组件做如下更改

<template>
    <div class="complex">
        <h4>复杂组件</h4>
        <lifecycle-single compName="cihld1"></lifecycle-single>
        <lifecycle-single compName="child2"></lifecycle-single>
        <el-button @click="dataVar += 1">complex更新 {{dataVar}}</el-button>
        <el-button @click="handleDestroy">complex销毁</el-button>
    </div>
</template>

初始化组件时,打印:

Vue生命周期实例分析

当child1更新和销毁时,打印:

Vue生命周期实例分析

当child2更新和销毁时,打印:

Vue生命周期实例分析

当父组件销毁时,打印

Vue生命周期实例分析

从打印结果可以看出:

5. 宏mixin的生命周期

在上面的基础上,添加一个mixin.js文件,内容如下:

const COMPONENT_NAME = 'lifecycleMixin'
 
export default {
    name: COMPONENT_NAME,

    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`)
    }
}

同样的,复杂组件做如下更改:

import lifecycleMixin from './mixin'

export default {

    mixins: [lifecycleMixin],
    // ...
}

组件初始化时,打印:

Vue生命周期实例分析

组件销毁时,打印:

Vue生命周期实例分析

从打印结果可以看出:

到此,关于“Vue生命周期实例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. Vue生命周期
  2. Vue入门九、Vue生命周期

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:怎么使用Java方法调用解析静态分派和动态分派

下一篇:Javaweb怎么实现头像上传及读取显示

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》