前端学习笔记（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.父子组件生命周期测试

父组件：

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
    }
  }
}

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

3.1 初始化渲染 

3.2 更新 

3.3 销毁

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

---