Vue的生命周期-销毁阶段

最新推荐文章于 2024-07-19 12:00:10 发布

YY小怪兽

最新推荐文章于 2024-07-19 12:00:10 发布

阅读量1w

点赞数 3

分类专栏： Vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lihui61357457/article/details/121730843

版权

Vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

详情可见

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

在这里插入图片描述

YY小怪兽

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
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生命周期方法一样,
复制链接

扫一扫

专栏目录