9.生命周期函数

生命周期函数,也叫生命周期钩子,是指组件挂载以及组件销毁所触发的一系列的方法。

 在components目录下新建Life.vue组件,用于演示生命周期函数

<template>
    <div>
        <h2>{{msg}}</h2>
        
    </div>
</template>
<script>
export default {
  name: 'life',  
  data () {
    return {
        msg:'生命周期函数演示'
    }
  },
  methods:{},
  beforeCreate(){
      console.log('实例创建之前')
  },
  created(){
      console.log('实例创建完成(常用,用于从后台获取数据后。)')
  },
  beforeMount(){
      console.log('模板编译之前')
  },
  mounted(){
      console.log('模板编译完成')
  },
  beforeUpdate(){
      console.log('数据更新之前')
  },
  updated(){
      console.log('数据更新完毕')
  },
  beforeDestroy(){
      console.log('实例销毁之前')
  },
  destroyed(){
      console.log('实例销毁完成')
  }
  
}
</script>
<style lang="scss" scoped>
h2{
    color: green;
}
</style>

在Home.vue组件内引用

<template>
    <div>
        <h2>这是一个首页组件</h2>
        <button @click="run">弹出首页组件提示</button>
        <v-life v-if="flag"></v-life>
        <br>
        <button @click="gua()">挂载卸载实例组件</button>
    </div>
</template>
<script>
import Life from './Life.vue';
export default {
  name: 'home',  
  data () {
    return {
        msg:'首页组件',
        flag:true
    }
  },
  methods:{
    run(){
        alert(this.msg)
    },
    gua(){
      this.flag=!this.flag
    }
  },
  components:{
    'v-life':Life
  }

}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    我是一名创业者,我的公司(深圳市友浩达科技有限公司)在2018年8月8日开始运营,现在还属于微型公司。这个春节假期,我一直十分关注疫情动向,也非常关心其对公司带来的影响。

    TVP官方团队
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • 数据中台,概念炒作还是另有奇效? | TVP思享

    作者简介:史凯,花名凯哥,腾讯云最具价值专家TVP,ThoughtWorks数据智能业务总经理。投身于企业数字化转型工作近20年。2000年初,在IBM 研发企业级中间件,接着加入埃森哲,为大型企业提供信息化架构规划,设计,ERP,云平台,数据仓库构建等技术咨询实施服务,随后在EMC负责企业应用转型业务,为企业提供云迁移,应用现代化服务。现在专注于企业智能化转型领域,是数据驱动的数字化转型的行业布道者,数据中台的推广者,精益数据创新体系的创始人,2019年荣获全球Data IQ 100人的数据赋能者称号,创业邦卓越生态聚合赋能官TOP 5。2019年度数字化转型专家奖。打造了行业第一个数据创新的数字化转型卡牌和工作坊。创建了精益数据创新方法论体系构建数据驱动的智能企业,并在多个企业验证成功,正在向国内外推广。

    TVP官方团队
    大数据数据分析企业
  • 扩展 Kubernetes 之 CRI

    使用 cri-containerd 的调用流程更为简洁, 省去了上面的调用流程的 1,2 两步

    王磊-AI基础
    Kubernetes
  • 扩展 Kubernetes 之 Kubectl Plugin

    kubectl 功能非常强大, 常见的命令使用方式可以参考 kubectl --help,或者这篇文章

    王磊-AI基础
    Kubernetes
  • 多种登录方式定量性能测试方案

    最近接到到一个测试任务,某服务提供了两种登录方式:1、账号密码登录;2、手机号+验证码登录。要对这两种登录按照一定的比例进行压测。

    八音弦
    测试服务 WeTest
  • 线程安全类在性能测试中应用

    首先验证接口参数签名是否正确,然后加锁去判断订单信息和状态,处理用户增添VIP时间事务,成功之后释放锁。锁是针对用户和订单的分布式锁,使用方案是用的redis。

    八音弦
    安全编程算法
  • 使用CDN(jsdelivr) 优化博客访问速度

    PS: 此篇文章适用于 使用 Github pages 或者 coding pages 的朋友,其他博客也类似.

    IFONLY@CUIT
    CDNGitGitHub开源
  • 扩展 Kubernetes 之 CNI

    Network Configuration 是 CNI 输入参数中最重要当部分, 可以存储在磁盘上

    王磊-AI基础
    Kubernetes
  • 聚焦【技术应变力】云加社区沙龙online重磅上线!

    云加社区结合特殊时期热点,挑选备受关注的音视频流量暴增、线下业务快速转线上、紧急上线防疫IoT应用等话题,邀请众多业界专家,为大家提供连续十一天的干货分享。从视野、预判、应对等多角度,帮助大家全面提升「技术应变力」!

    腾小云
  • 京东购物小程序购物车性能优化实践

    它是小程序开发工具内置的一个可视化监控工具,能够在 OS 级别上实时记录系统资源的使用情况。

    WecTeam
    渲染JavaScripthttps网络安全缓存

扫码关注云+社区

领取腾讯云代金券