Vue 生命周期

一、生命周期钩子

1、挂载流程

初始化生命周期->beforecreate->数据代理->created->初始化虚拟DOM->beforemount->虚拟DOM转化为真是DOM并挂在在页面->mounted

2、更新流程

数据发生改变->beforeupdate(此时数据发生改变，页面没变)->对比虚拟DOM，生成页面->updated(页面和数据都更新)

3、销毁流程

vm.$destroy()-> beforedestroy(销毁前准备工作)->destoryed()

二、重要的生命周期钩子

1、mounted

发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]

2、beforedestroy

清除定时器、解绑自定义事件、取消订阅消息等[首尾工作]

三、销毁Vue实例

1、销毁后借助Vue开发者工具看不到任何信息

2、销毁后自定义的事件会失效，原生dom不失效

3、一般不会在beforedestroy钩子操作数据，即使操作了，也不会触发新的流程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期钩子</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 使用定时器操作透明度 -->
    <div id="container">
        <h2 :style="{opacity: tmd}">Hello World</h2>
        <button @click="stopTimer">停止</button>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#container',
            data:{
                tmd:1                
            },
            methods: {
                stopTimer(){
                    this.$destroy()
                }
            },
            mounted() {
                console.log("mounted")
                this.timer = setInterval(() => {
                    console.log('setInterva')
                    if (this.tmd<=0) {
                        this.tmd=1
                    } else {
                        this.tmd-=0.01
                    }
                }, 10);
            },
            beforeDestroy() {
                clearInterval(this.timer)
            },
        })
    </script>
</body>
</html>

 

posted @ 2025-01-01 12:09  市丸银  阅读(13)  评论(0)    收藏  举报