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、创建（创建前，创建完毕）

1. <template>
2. <Person/>
3. </template>
5. <script>
6. import Person from './components/Person.vue'
7. export default {
8.   name: 'App',
9.   components:{Person}
10. }
11. </script>

复制代码

1. <!-- eslint-disable vue/multi-word-component-names -->
2. <template>
3. <div class="person">
4. <h2>当前求和为：{
5.   { sum }}</h2>
6. <button @click="add">点我sum+1</button>
7. </div>
9. </template>
10. <script>
12. export default {
14.   // eslint-disable-next-line vue/multi-word-component-names
15.   name: 'person',
16.   data(){
17.     return {
18.       sum: 1
19.     }
20.   },
21.   methods:{
22.      add(){
23.       this.sum += 1
24.      }
25.   },
26.   //创建前的钩子
27.   beforeCreate(){
28.     console.log('创建前')
29.   },
30.   //创建完毕的钩子
31.   created(){
32.     console.log('创建完毕')
33.   }
34. }
35. </script>
37. <style scoped>
38.   .person {
39.     background-color: skyblue;
40.     padding: 20px;
41.     border-radius: 10px;
42.     box-shadow: 0 0 10px;
44.   }
45. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。