看看图

一提到生命周期呢，大家就会想到这张图：

生命周期的图.png

其实我是没太看懂，只是知道会先执行setup，其他的看setup里面写了啥。

写个函数罗列一下生命周期的钩子

但是这样也不行呀，还是要多了解一些的，那么怎么办呢？只好用本办法了，把生命周期的钩子函数都写一遍，运行一下看看效果。

好在vue3的composition API，可以把钩子拿出去放在单独的js文件里面，这样就不用我们每一个组件里面都写一遍了。

• lifecycle.js

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered
} from 'vue'

/**
 * @function 显示生命周期
 * @description 默认调用生命周期，体验具体的执行效果
 * @param {string} flag 组件标识，区分不同的组件
 */
export default function (flag) {
  const debug = true

  // 渲染dom之前
  onBeforeMount(() => {
    if (debug) {
      console.log(`【${flag}】—— onBeforeMount`)
    }
  })
  // dom渲染结束
  onMounted(() => {
    if (debug) {
      console.log(`【${flag}】—— onMounted`)
    }
  })

  // 数据更新之前
  onBeforeUpdate(() => {
    if (debug) {
      console.log(`【${flag}】—— onBeforeUpdate`)
    }
  })

  // 重新渲染dom之后
  onUpdated(() => {
    if (debug) {
      console.log(`【${flag}】—— onUpdated`)
    }
  })

  // 被 keep-alive 缓存的组件激活时调用
  onActivated(() => {
    if (debug) {
      console.log(`【${flag}】—— onActivated`)
    }
  })

  // 被 keep-alive 缓存的组件停用时调用
  onDeactivated(() => {
    if (debug) {
      console.log(`【${flag}】—— onDeactivated`)
    }
  })

  // 数据更新之前
  onBeforeUnmount(() => {
    if (debug) {
      console.log(`【${flag}】—— onBeforeUnmount`)
    }
  })

  // 卸载组件实例后调用
  onUnmounted(() => {
    if (debug) {
      console.log(`【${flag}】—— onUnmounted`)
    }
  })

  // 当捕获一个来自子孙组件的错误时被调用
  onErrorCaptured((err, instance, info) => {
    if (debug) {
      console.log(`【${flag}】—— onErrorCaptured`)
      console.log('err', err)
      // console.log('instance', instance)
      console.log('info', info)
    }
  })

  // 跟踪虚拟 DOM 重新渲染时调用
  onRenderTracked((debuggerEvent) => {
    if (debug) {
      console.log(`【${flag}】—— onRenderTracked`, debuggerEvent)
    }
  })

  // 当虚拟 DOM 重新渲染
  onRenderTriggered((debuggerEvent) => {
    if (debug) {
      console.log(`【${flag}】—— onRenderTriggered`)
      console.log('debuggerEvent', debuggerEvent)
    }
  })
}

• 引用
  先用 import 把钩子都引用进来，然后写一个函数，设置一个参数，来区分是哪个组件调用的，否则显示一堆 onMounted 能看出来个啥。

• const debug = true
  设置一个状态，便于控制是否打印。

然后就是体力活了，每个钩子里面都打印一下。

其中有三个钩子是带参数的，我们把参数打出来看看。

在组件里面调用

import lifeCycle from '@/jsmodule/lifecycle.js'
setup () {
    lifeCycle('metaForm')
}

两行就可以搞定，只是每个组件都要写一遍，还是有点麻烦，不知道有没有给组件默认加上的方法。

看看效果

【App】—— onBeforeMount
【App】—— onMounted
【helpForm】—— onBeforeMount
【metaForm-左-表单自己的属性】—— onBeforeMount
【表单meta的子控件列表】—— onBeforeMount
【metaForm-中-表单子控件】—— onBeforeMount
【metaForm-右-显示表单子控件的json】—— onBeforeMount
【metaForm-右-显示表单子控件的json】—— onRenderTracked {target: {…}, type: "get", key: "allItemMeta", effect: ƒ}
【metaForm-右-显示表单子控件的json】—— onRenderTracked {target: {…}, type: "get", key: "controlType", effect: ƒ}
【metaForm-右-显示表单子控件的json】—— onRenderTracked {target: RefImpl, type: "get", key: "value", effect: ƒ}
【metaForm-右-显示表单子控件的json】—— onRenderTracked {target: {…}, type: "iterate", key: Symbol(iterate), effect: ƒ}
【metaForm-右-显示表单子控件的json】—— onRenderTracked {target: RefImpl, type: "get", key: "value", effect: ƒ}
【metaForm-右-显示表单子控件的json】—— onRenderTracked {target: {…}, type: "get", key: "partItemMeta", effect: ƒ}
【jsonFormat=外壳——】—— onBeforeMount
【jsonFormat=外壳——】—— onRenderTracked {target: RefImpl, type: "get", key: "value", effect: ƒ}
【metaForm-下中-展示表单控件】—— onBeforeMount
【metaForm-下中-展示表单控件】—— onRenderTracked {target: RefImpl, type: "get", key: "value", effect: ƒ}
【metaForm-下中-展示表单控件】—— onRenderTracked {target: RefImpl, type: "get", key: "value", effect: ƒ}
【metaForm-下右-显示表单的json】—— onBeforeMount
【jsonFormat=外壳——】—— onBeforeMount
【jsonFormat=外壳——】—— onRenderTracked {target: RefImpl, type: "get", key: "value", effect: ƒ}
【表单meta的子控件列表】—— onMounted
【metaForm-左-表单自己的属性】—— onMounted
【表单子控件的扩展属性】—— onMounted
【metaForm-中-表单子控件】—— onMounted
【jsonFormat=外壳——】—— onMounted
【metaForm-右-显示表单子控件的json】—— onMounted
【metaForm-下中-展示表单控件】—— onMounted
【jsonFormat=外壳——】—— onMounted
【metaForm-下右-显示表单的json】—— onMounted
【helpForm】—— onMounted

这是刚刷新的显示结果，如果输入数据点个按钮等操作，还会有相应的输出，大家看这个估计比较晕，恩，我也比较晕。

这个就是表单meta的小工具的页面。还是比较乱。

本来给哪个json format的也加上了，但是显示的行数实在太多，就不要了。

换成各种属性的项目，应该能够有感觉吧，这样对于生命周期应该可以有更深入一点的了解。

另外程序出错的时候，会显示其他的钩子，可以看到一些辅助信息的。