Vue的生命周期-销毁阶段_vue 销毁

作者：Cpp五条 | 2024-03-12 06:26:31

踩

vue 销毁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>70-Vue-生命周期方法</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是生命周期方法?
和wbpack生命周期方法一样, 都是在从生到死的特定阶段调用的方法
PS: 生命周期钩子 = 生命周期函数 = 生命周期事件
2.Vue生命周期方法分类
2.1创建期间的生命周期方法
    beforeCreate:
    created:
    beforeMount:
    mounted:
2.2运行期间的生命周期方法
    beforeUpdate:
    updated:
2.3销毁期间的生命周期方法
    beforeDestroy:
    destroyed:
-->
<!--这里就是MVVM中的View-->
<div id="app">
    <button @click="change">切换</button>
    <!--通过v-if来切换, 会直接删除和重新创建-->
    <one v-if="isShow"></one>
</div>
<!--Vue实例对象可以看做是一个大的组件, 我们自定义的组件可以看做是一个小的组件
    那么大的组件中可以使用的属性和方法, 在小的组件中也可以使用
    例如: 在Vue实例中我们可以添加data, methods, 那么在自定义的组件中也可以添加data, methods
    所以Vue实例中可以使用生命周期方法, 组件中也可以使用生命周期方法-->
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>
<script>
    Vue.component("one", {
        template: "#one",
        data: function(){
            return {
                msg: "小灰灰"
            }
        },
        methods: {
            say(){
                console.log("say");
            }
        },
        beforeDestroy: function(){
            /*
            在调用beforeDestroy的时候, 表示当前组件即将被销毁了
            注意点: 只要组件不被销毁, 那么beforeDestroy就不会调用
                    beforeDestroy函数是我们最后能够访问到组件数据和方法的函数
            * */
            // console.log("beforeDestroy");
            // console.log(this.msg);
            // console.log(this.say);
        },
        destroyed: function(){
            /*
            在调用destroyed的时候, 表示当前组件已经被销毁了
            注意点: 只要组件不被销毁, 那么destroyed就不会调用
                    不要在这个生命周期方法中再去操作组件中数据和方法
            * */
            console.log("destroyed");
        }
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 专门用于监听数据变化的
        watch: {
        },
        // 这里就是MVVM中的Model
        data: {
            isShow: true,
        },
        // 专门用于存储监听事件回调函数
        methods: {
            change(){
                this.isShow = !this.isShow;
            }
        },
        // 专门用于定义计算属性的
        computed: {
        },
        // 专门用于定义局部组件的
        components: {
        }
    });
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

在这里插入图片描述

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】