vue和react的生命周期

一、Vue的生命周期

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

生命周期	描述	作用
beforeCreate	加载实例时触发	data，props，menthod未初始化，不能使用，此阶段可添加loading。
created	实例完全加载后触发	data，props，menthod初始化完成，可以使用，此阶段可loading，调用异步请求
beforeMount	组件挂载之前触发	内存中模板已经编译好了，但是还没有挂载到页面中，页面还是旧的
mounted	组件挂载到实例上去之后	实例进入到了运行阶段，此阶段可以使用插件操作页面上的DOM节点
beforeUpdate	组件数据发生变化，更新之前	此时页面没有和最新的数据保持同步（页面数据是旧的，data中的数据是已更新的新数据）
updated	组件数据更新之后	此时页面和最新的数据保持同步（页面数据和data中的数据同步，都是最新的），此阶段可以对数据统一处理
beforeDestroy	组件实例销毁之前	实例进入到了销毁阶段，data、props、methods、指令、过滤器都可用，此阶段可以提示用户是否确认停止事件
destroyed	组件实例销毁之后	data、props、methods、指令、过滤器都不可用
activated	keep-alive 缓存的组件激活时调用	-
deactivated	keep-alive 缓存的组件停用时调用	-
errorCaptured	捕获一个来自子孙组件的错误时被调用	-
nextTick	更新数据后立即操作dom 用来处理我们数据更新了，但是页面数据没有更新的情况	-

<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.log('mounted --- 挂载到dom后 --- 父', this.myParent,