vue和react的生命周期

一、Vue的生命周期

初始化阶段（组件创建、数据初始化）、挂载、更新、销毁
父子组件生命周期执行顺序
初次加载组件时：父beforeCreate – 父created – 父beforeMount – 子beforeCreate – 子created – 子beforeMount – 子mounted – 父mounted
数据更新时：父beforeUpdate – 子beforeUpdate – 子updated – 父updated
内置方法属性的执行顺序
props – methods – data – computed – watch

<template>
  <div class="my-life-cycle">
    <h1>生命周期的测试 --- 父组件</h1>
    <!-- render：渲染，指把要在浏览器显示的内容（也就是要挂载的内容）准备好。 -->
    <!-- mounted：挂载，指把准备好的要显示的内容显示出来。 -->
    <MyLifeCycleChild :myParent="myParent" />
    {
   {
    myParent }}
    <button @click="changeParent">点击修改父亲的名字</button>
    <router-link to="/">Go to Home</router-link>
  </div>
</template>
<script>
import MyLifeCycleChild from './MyLifeCycleChild.vue'
export default {
   
  name: 'MyLifeCycle',
  data() {
   
    return {
   
      myParent: 'wenmiao'
    }
  },
  props: {
   
    mySon: {
   
      type: String,
      require: true,
      default: 'dasa'
    }
  },
  components: {
   
    MyLifeCycleChild
  },
  beforeCreate: function () {
   
    console.log('beforeCreate --- 创建vue实例前 --- 父', this.myParent, this.$el)
  },
  created: function () {
   
    // data/props/methods：在这个阶段才可以使用
    console.log('created --- 创建vue实例后 --- 父', this.myParent, this.mySon, this.$el)
  },
  // created结束后，vue开始编译模板，最终在内存中生成一个编译好的最终模板字符串，然后把模板字符串渲染为内存中的dom
  beforeMount: function () {
   
    console.log('beforeMount --- 挂载到dom前 --- 父', this.myParent, this.mySon, this.$el)
  },
  // 模板在内存中已经编译好了，但是并没有渲染到页面中
  mounted: function () {
   
    // this.$el：在这个阶段才可以使用
    console
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56