9.生命周期函数

最新推荐文章于 2025-12-01 18:50:12 发布

转载最新推荐文章于 2025-12-01 18:50:12 发布 · 966 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuepangzi/p/11616600.html

文章标签：

#javascript #ViewUI

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

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