Vue的生命周期流程、生命周期回调函数及其应用

最新推荐文章于 2025-04-08 16:48:53 发布

Bulut0907

最新推荐文章于 2025-04-08 16:48:53 发布

阅读量522

点赞数 5

分类专栏： Vue 文章标签： vue.js 生命周期流程生命周期回调函数生命周期回调函数应用生命周期代码执行过程

本文链接：https://blog.youkuaiyun.com/yy8623977/article/details/131993854

版权

Vue 专栏收录该内容

35 篇文章

订阅专栏

1. 生命周期流程图

Vue的整个生命周期如下所示：

销毁Vue实例：完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器(如click事件)。销毁后借助Vue开发者工具看不到任何信息

2. 生命周期回调函数

Vue会在特定的时间自动调用一些生命周期回调函数，这些回调函数名称固定，我们只需要实现里面的函数具体业务逻辑
生命周期函数中的this指向是vm或组件实例对象
常用的生命周期回调函数：
1. mounted: 主要用来发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作
2. beforeDestroy: 主要用来清除定时器、解绑自定义事件、取消订阅消息等收尾工作。一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

3. 生命周期代码执行过程

我们可以通过如下的程序，来看下具体的执行过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
<!--    <h2>n的值是：{{n}}</h2>-->
<!--    <button @click="add">点我n+1</button>-->
<!--    <button @click="bye">点我销毁vm</button>-->
</div>


<script type="text/javascript">
    new Vue({
        // 绑定的是整个div及其内部
        el:'#root',
        template:`
            <!-- 使用这个div替换上面的id=root的div -->
        	<div>
                <h2>n的值是：{{n}}</h2>
                <button @click="add">点我n+1</button>
                <button @click="bye">点我销毁vm</button>
        	</div>
        `,
        data:{
            n:1
        },
        methods: {
            add(){
                console.log('add')
                this.n++
            },
            bye(){
                console.log('bye')
                this.$destroy()
            }
        },
        watch:{
            n(){
                console.log('n变了')
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
            // debugger    // 可以用来进行debug功能
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        }
    })
</script>

</body>
</html>

运行程序，页面如下：
页面运行效果
控制台输出如下：
运行控制台输出

点我n+1后，此时n的值是: 2，控制台全部输出如下。会先监视到n的变化，再进入到update流程

点击n+1后的控制台输出
点我销毁vm，控制台全部输出如下。此时再点我n+1没有反应了
销毁vm控制台输出

4. 生命周期回调函数应用

下面我们通过一个示例，来对生命周期回调函数进行应用

打开页面，页面加载完成之后，vm自动调用mounted，启动定时器让透明度来回变换
点击销毁vm按钮，vm自动调用beforeDestroy，关闭定时器，让透明度停止变化

使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2 :style="{opacity}">我的透明度会来回变换</h2>
    <button @click="stop">销毁vm停止透明度变换</button>
</div>


<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            opacity:1
        },
        methods: {
            stop(){
                this.$destroy()
            }
        },
        mounted(){
            this.timer = setInterval(() => {
                this.opacity -= 0.01
                if(this.opacity <= 0) this.opacity = 1
            },16)
        },
        beforeDestroy() {
            clearInterval(this.timer)
        }
    })
</script>

</body>
</html>

页面显示如下：
生命周期回调函数应用