前端学习-vue视频学习010-生命周期

尚硅谷视频教程

组件的生命周期

  • 创建
  • 挂载
  • 更新
  • 销毁

在特定的时期调用特定的函数,即生命周期

vue2的生命周期

4个周期,对应8个钩子(生命周期函数)

  • 创建:创建前、创建完毕
  • 挂载:挂载前、挂载完毕
  • 更新:更新前、更新完毕
  • 销毁:销毁前、销毁完毕
<script>

export default {
  // eslint-disable-next-line
  name: 'Person',
  data(){
    return {
        sum:1
    }
  },
  methods:{
    changeSum(){
        this.sum += 1
    }
  },

  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>

创建、挂载仅产生一次
更新可多次
销毁:当不使用该组件时,组件销毁

如何销毁组件

<template>
  <Person v-if="flag"/>
</template>

<script>
// import { Person } from './components/Person.vue'


export default {
  name: 'App',
  components:{
    Person: ()=> import ('./components/Person.vue')
  },
  data(){
    return{
      flag:false
    }
  }
}
</script>

vue2的生命周期

4个周期,对应6个钩子(生命周期函数)

  • 创建:集成在setup中
  • 挂载:挂载前、挂载完毕
  • 更新:更新前、更新完毕
  • 卸载:卸载前、卸载完毕

<script lang="ts" setup name="Person">
    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

    let sum = ref(0)
    function changeSum() {
        sum.value += 1
    }
    // vue3中创建集成在setup里
    console.log('子--创建');
    onBeforeMount(()=>{
        console.log('子--挂载前');
    })
    onMounted(()=>{
        console.log('子--挂载完毕');
    })
    onBeforeUpdate(()=>{
        console.log('子--更新前');
    })
    onUpdated(()=>{
        console.log('子--更新完毕');
    })
    onBeforeUnmount(()=>{
        console.log('子--卸载前');
    })
    onUnmounted(()=>{
        console.log('子--卸载完毕');
    })
</script>

根组件最后才挂载

posted @ 2024-03-21 22:33  ayubene  阅读(3)  评论(0编辑  收藏  举报