前端学习笔记（9）-Vue2和 Vue3生命周期区别

1.vue2常用生命周期：

创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数

创建后：Created() 是最早使用data和methods中数据的钩子函数

挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树

挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步

更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的

更新后：Updated() 内存和页面都是新的

销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

销毁后：Destroyed() 已经销毁完毕
 

2.Vue3中生命周期函数的修改

beforeCreate   -> 使用 setup()
created            -> 使用 setup()
beforeMount    -> onBeforeMount
mounted          -> onMounted
beforeUpdate  -> onBeforeUpdate
updated           -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed        -> onUnmounted
errorCaptured -> onErrorCaptured
 

 3.父子组件生命周期测试

<script lang="ts">
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from 'vue'
export default defineComponent({
  name: 'testChild',
  props: {
    msg: String,
  },
  // vue2.x中的生命周期钩子
  beforeCreate() {
    console.log('子组件中2.x 中的 beforeCreate ')
  },
  created() {
    console.log('子组件中2.x 中的 created ')
  },
  beforeMount() {
    console.log('子组件中2.x 中的 beforeMount ')
  },
  mounted() {
    console.log('子组件中2.x 中的 mounted ')
  },
  beforeUpdate() {
    console.log('子组件中2.x 中的 beforeUpdate ')
  },
  updated() {
    console.log('子组件中2.x 中的 updated ')
  },
  // vue2.x中的beforeDestroy和destroyed这两个生命周期已经在vue3中改名了，所以不能再使用
  beforeUnmount() {
    // 已被废弃
    console.log('子组件中2.x 中的 beforeUnmount ')
  },
  unmounted() {
    console.log('子组件中2.x 中的 unmounted ')
  },
  setup() {
    console.log('子组件中3.x中的 setup ')

    onBeforeMount(() => {
      console.log('子组件中3.x 中的 onBeforeMount')
    })
    onMounted(() => {
      console.log('子组件中3.x 中的 onMounted')
    })
    onBeforeUpdate(() => {
      console.log('子组件中3.x 中的 onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('子组件中3.x 中的 onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('子组件中3.x 中的 onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('子组件中3.x 中的 onUnmounted')
    })

    return {

    }
  },
})
</script>

父组件：

import testChild from './testChild'
export default {
  name: 'echartTest3',
  components: {
    testChild
  },
  setup () {

    let tmp = new Date();
    console.log('父组件中的 setup ')
    onBeforeMount(() => {
      console.log('父组件中的 onBeforeMount')
    })
    onMounted(() => {
      console.log('父组件中的 onMounted')
    })
    onBeforeUpdate(() => {
      console.log('父组件中的 onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('父组件中的 onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('父组件中的 onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('父组件中的 onUnmounted')
    })
    // 响应式的数据
    const state = reactive({
      count: 0,
    })
    
    return {
      ...toRefs(state),
      name,
      tmp
    }
  }
}
</script>

通过父组件更新数据将数据传输给子组件 

3.1 初始化渲染 

3.2 更新 

3.3 销毁

父组件beforeUnmount
子组件beforeUnmount
子组件unmounted
父组件unmounted
 

---