VUE之生命周期

目录

1、VUE2的生命周期

1.1、创建（创建前，创建完毕）

1.2、挂载（挂载前，挂载完毕）

1.3、更新（更新前，更新完毕）

1.4、销毁（销毁前，销毁完毕）

2、VUE3的生命周期

2.1、创建（setup）

2.2、挂载（onBeforeMount、onMounted）

2.3、更新（onBeforeUpdate、onUpdated）

2.4、卸载（onBeforeUnmount、OnUnmounted）

3、父和子的生命周期

---

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。 

1、VUE2的生命周期

• 创建阶段：beforeCreate、created
• 挂载阶段：beforeMount、mounted
• 更新阶段：beforeUpdate、updated
• 销毁阶段：beforeDestory、destroyed

1.1、创建（创建前，创建完毕）

<template>
<Person/>
</template>

<script>
import Person from './components/Person.vue'
export default {
  name: 'App',
  components:{Person}
}
</script>

<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div class="person">
<h2>当前求和为：{
  { sum }}</h2>
<button @click="add">点我sum+1</button>
</div>

</template>
<script>

export default {

  // eslint-disable-next-line vue/multi-word-component-names
  name: 'person',
  data(){
    return {
      sum: 1
    }
  },
  methods:{
     add(){
      this.sum += 1
     }
  },
  //创建前的钩子
  beforeCreate(){
    console.log('创建前')
  },
  //创建完毕的钩子
  created(){
    console.log('创建完毕')
  }
}
</script>

<style scoped>
  .person {
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;

  }
</style>