前端学习-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>

根组件最后才挂载