feat(devtools): performance events

packages/runtime-core/src/devtools.ts

@@ -15,7 +15,9 @@ const enum DevtoolsHooks {
   COMPONENT_UPDATED = 'component:updated',
   COMPONENT_ADDED = 'component:added',
   COMPONENT_REMOVED = 'component:removed',
-  COMPONENT_EMIT = 'component:emit'
+  COMPONENT_EMIT = 'component:emit',
+  PERFORMANCE_START = 'perf:start',
+  PERFORMANCE_END = 'perf:end'
 }
 
 interface DevtoolsHook {
@@ -73,6 +75,28 @@ function createDevtoolsComponentHook(hook: DevtoolsHooks) {
   }
 }
 
+export const devtoolsPerfStart = /*#__PURE__*/ createDevtoolsPerformanceHook(
+  DevtoolsHooks.PERFORMANCE_START
+)
+
+export const devtoolsPerfEnd = /*#__PURE__*/ createDevtoolsPerformanceHook(
+  DevtoolsHooks.PERFORMANCE_END
+)
+
+function createDevtoolsPerformanceHook(hook: DevtoolsHooks) {
+  return (component: ComponentInternalInstance, type: string, time: number) => {
+    if (!devtools) return
+    devtools.emit(
+      hook,
+      component.appContext.app,
+      component.uid,
+      component,
+      type,
+      time
+    )
+  }
+}
+
 export function devtoolsComponentEmit(
   component: ComponentInternalInstance,
   event: string,

packages/runtime-core/src/profiling.ts

@@ -1,4 +1,5 @@
 import { ComponentInternalInstance, formatComponentName } from './component'
+import { devtoolsPerfEnd, devtoolsPerfStart } from './devtools'
 
 let supported: boolean
 let perf: any
@@ -10,6 +11,10 @@ export function startMeasure(
   if (instance.appContext.config.performance && isSupported()) {
     perf.mark(`vue-${type}-${instance.uid}`)
   }
+
+  if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+    devtoolsPerfStart(instance, type, supported ? perf.now() : Date.now())
+  }
 }
 
 export function endMeasure(instance: ComponentInternalInstance, type: string) {
@@ -25,6 +30,10 @@ export function endMeasure(instance: ComponentInternalInstance, type: string) {
     perf.clearMarks(startTag)
     perf.clearMarks(endTag)
   }
+
+  if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
+    devtoolsPerfEnd(instance, type, supported ? perf.now() : Date.now())
+  }
 }
 
 function isSupported() {