首页 > 其他分享 >生命周期之销毁

生命周期之销毁

时间:2022-10-04 19:00:45浏览次数:48  
标签:school 生命周期 name 销毁 定时器 组件 data

不完全(需补充):

  1. 定时器并不会被销毁,需要手动销毁

 

<template>
    <div class="school">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
        <button @click="death">点我销毁当前Schoolt组件</button>
    </div>
</template>

<script>
    export default {
        name:'School',
        props:['getSchoolName'],
        data() {
            return {
                name:'尚硅谷',
                address:'北京',
                n:0,
            }
        },
        methods: {
            death(){
                this.$destroy()
            }
        },
        mounted() {
            this.$bus.$on('hello',(data)=>{
                console.log('我是School组件,收到了数据',data)
            }),
            setInterval(()=>{
                console.log('定时器仍然在执行', this.n++)
            },3000)
        },
        beforeDestroy() {
            this.$bus.$off('hello')
        },
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>

 

 

  定时器在mounted()生命周期函数中运行,此时点击传学生名给school按钮,可以触发自定义事件,(此时school组件没有销毁),当销毁school组件按钮后,定时器仍然运行,但是无法传学生名给school组件


    

标签:school,生命周期,name,销毁,定时器,组件,data
From: https://www.cnblogs.com/wh024/p/16754222.html

相关文章

  • React生命周期深度完全解读
    在React中,对于每一次由状态改变导致页面视图的改变,都会经历两个阶段:render阶段、commit阶段。只有class组件才有生命周期,因为class组件会创建对应的实例,而函数组......
  • Vue2 生命周期
    Vue生命周期概述在使用Vue时,我们需要执行一些JS代码。比如我们需要在页面中添加一个定时器来固定间隔更新时间。这时我们可能会想到直接在,Vue实例外书写JS代码......
  • bug的生命周期都有那些阶段
    bug的生命周期都有那些阶段​​一、主要有八个生命周期阶段​​​​二、bug生命周期流程图​​一、主要有八个生命周期阶段  1)New:是新发现的bug(指给对应的开发);  2)Open......
  • 17_生命周期
    1.引出生命周期<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>引出生命周期</title><!--引入Vue--><script......
  • 【前端必会】走进webpack生命周期,另类的学习方法
    背景webpack构建过程中的hooks都有什么呢?除了在网上看一些文章,还可以通过更直接的办法,结合官方文档快速让你进入webpack的hook世界写一个入口文件//index.jsconstwebp......
  • 重磅发布!Orbit 云原生应用全生命周期管理工具上线啦!
    https://help-assets.codehub.cn/enterprise/guanwang/video/orbit-new1.mp4......
  • 秋色园QBlog技术原理解析:Module之页面基类-生命周期流程(六)
    文章回顾:1:​​秋色园QBlog技术原理解析:开篇:整体认识(一)​​--介绍整体文件夹和文件的作用2:​​秋色园QBlog技术原理解析:认识整站处理流程(二)​​--介绍秋色园业务处理......
  • 秋色园QBlog技术原理解析:Module之基类生命周期-页面加载(七)
    文章回顾:1:​​秋色园QBlog技术原理解析:开篇:整体认识(一)​​--介绍整体文件夹和文件的作用2:​​秋色园QBlog技术原理解析:认识整站处理流程(二)​​--介绍秋色园业务处理......
  • grpc 核心概念、架构和生命周期
    介绍关键的gRPC概念,概述gRPC架构和RPC生命周期。不熟悉gRPC?请先阅读《gRPC简介》。关于特定语言的细节,请参见您所选择的语言的快速入门、教程和参考文档。 纵观全局服......
  • UNIAPP的生命周期
    UNIAPP的生命周期: Pages页面生命周期:onlnit:初始化加载(比Load更早)百度小程序专用onLoad:初始化加载onShow:页面显示onReady:DOM加载完毕......