组件生命周期

组件生命周期

示例代码如下:

<template>
   <div class="v_home_life">
      <div>
         {{ title }}
      </div>
      <hr/>
      <div>{{ msg }}</div>
      <button @click="toupdate()">更新</button>
   </div>
</template>
 
<script>
export default {
 
  name: 'v_home_life',
 
  data() 
  {
    return {
      title:"我是生命周期演示组件",
      msg:"我是更新前的测试数据"
 
    }
  },
  // 自定义方法
  methods:
  {
   toupdate()
   {
      this.msg = "我是更新后的数据";
   }
  },
 
  //实例创建之前
  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="css" scoped>
.v_home_life
{
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.5);
}
</style>