Enable custom fromatters格式化硬盘日

一、简述

在vue3源代码中如下所示编码：

if (__DEV__) {
  initDev()
}

// 具体调用的是
import { initCustomFormatter } from '@vue/runtime-dom'
initCustomFormatter()

在看源码之前要先看看实际效果：

假如关掉Custom Formatters则打印实际效果如下所示：

比照之上就会发现格式化硬盘以后的log日志美观性和结构型清楚许多，那这是如何实现的呢？

二、官方文档及其汉语翻译

官方文档

汉语翻译

三、源代码完成

源代码途径packages/runtime-core/src/customFormatter.ts

下列对于ref、reactive、shallowReactive、readOnly、shallowReadonly等算法设计格式化硬盘

  const formatter = {
    header(obj: unknown) {
      // TODO also format ComponentPublicInstance & ctx.slots/attrs in setup
      if (!isObject(obj)) {
        return null
      }

      if (obj.__isVue) {
        return ['div', vueStyle, `VueInstance`]
      } else if (isRef(obj)) {
        return [
          'div',
          {},
          ['span', vueStyle, genRefFlag(obj)],
          '<',
          formatValue(obj.value),
          `>`
        ]
      } else if (isReactive(obj)) {
        return [
          'div',
          {},
          ['span', vueStyle, isShallow(obj) ? 'ShallowReactive' : 'Reactive'],
          '<',
          formatValue(obj),
          `>${isReadonly(obj) ? ` (readonly)` : ``}`
        ]
      } else if (isReadonly(obj)) {
        return [
          'div',
          {},
          ['span', vueStyle, isShallow(obj) ? 'ShallowReadonly' : 'Readonly'],
          '<',
          formatValue(obj),
          '>'
        ]
      }
      return null
    },
    hasBody(obj: unknown) {
      return obj && (obj as any).__isVue
    },
    body(obj: unknown) {
      if (obj && (obj as any).__isVue) {
        return [
          'div',
          {},
          ...formatInstance((obj as ComponentPublicInstance).$)
        ]
      }
    }
  }

vue、数据、字符串数组等部件设定款式导出：

  const vueStyle = { style: 'color:#3ba776' }
  const numberStyle = { style: 'color:#0b1bc9' }
  const stringStyle = { style: 'color:#b62e24' }
  const keywordStyle = { style: 'color:#9d288c' }

四、运用

在vue3的设计中，大家打开了Enable custom fromatters以后就可以按期见到格式化硬盘以后的log日志。

打开Enable custom fromatters

格式化硬盘日志打印质量：

五、汇总

在我们在具体的设计中，也可以结合一些算法设计格式化输出，以提高我们自己的研发效率。