Skip to content

Commit dd47083

Browse files
AkryumAkryum
committed
feat(vue2): perf timeline, closes vuejs#1744 
1 parent 32b4611 commit dd47083

4 files changed

Lines changed: 67 additions & 6 deletions

File tree

‎packages/app-backend-vue2/src/components/perf.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { DevtoolsApi } from '@vue-devtools/app-backend-api'
2+
import { HookEvents, SharedData } from '@vue-devtools/shared-utils'
3+
import { instanceMap } from './tree'
4+
5+
const COMPONENT_HOOKS = {
6+
beforeCreate: { start: 'create' },
7+
created: { end: 'create' },
8+
beforeMount: { start: 'mount' },
9+
mounted: { end: 'mount' },
10+
beforeUpdate: { start: 'update' },
11+
updated: { end: 'update' },
12+
beforeDestroyed: { start: 'destroy' },
13+
destroyed: { end: 'destroy' },
14+
}
15+
16+
export function initPerf (api: DevtoolsApi, app, Vue) {
17+
// Global mixin
18+
Vue.mixin({
19+
beforeCreate () {
20+
applyPerfHooks(api, this, app)
21+
},
22+
})
23+
24+
// Apply to existing components
25+
instanceMap?.forEach(vm => applyPerfHooks(api, vm, app))
26+
}
27+
28+
export function applyPerfHooks (api: DevtoolsApi, vm, app) {
29+
if (vm.$options.$_devtoolsPerfHooks) return
30+
vm.$options.$_devtoolsPerfHooks = true
31+
32+
for (const hook in COMPONENT_HOOKS) {
33+
const { start, end } = COMPONENT_HOOKS[hook]
34+
const handler = function (this: any) {
35+
if (SharedData.performanceMonitoringEnabled) {
36+
api.ctx.hook.emit(
37+
start ? HookEvents.PERFORMANCE_START : HookEvents.PERFORMANCE_END,
38+
app,
39+
this._uid,
40+
this,
41+
start ?? end,
42+
api.now(),
43+
)
44+
}
45+
}
46+
const currentValue = vm.$options[hook]
47+
if (Array.isArray(currentValue)) {
48+
vm.$options[hook] = [handler, ...currentValue]
49+
} else if (typeof currentValue === 'function') {
50+
vm.$options[hook] = [handler, currentValue]
51+
} else {
52+
vm.$options[hook] = [handler]
53+
}
54+
}
55+
}

‎packages/app-backend-vue2/src/components/tree.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { AppRecord, BackendContext, DevtoolsApi } from '@vue-devtools/app-backen
22
import { classify, kebabize } from '@vue-devtools/shared-utils'
33
import { ComponentTreeNode, ComponentInstance } from '@vue/devtools-api'
44
import { getRootElementsFromComponentInstance } from './el'
5+
import { applyPerfHooks } from './perf.js'
56
import { getInstanceName, getRenderKey, getUniqueId, isBeingDestroyed } from './util'
67

78
export let instanceMap: Map<any, any>
@@ -324,6 +325,7 @@ function mark (instance) {
324325
instance.$on('hook:beforeDestroy', function () {
325326
instanceMap.delete(refId)
326327
})
328+
applyPerfHooks(api, instance, appRecord.options.app)
327329
}
328330
}
329331

‎packages/app-backend-vue2/src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { backendInjections, getComponentName } from '@vue-devtools/shared-utils'
33
import { ComponentInstance } from '@vue/devtools-api'
44
import { editState, getCustomInstanceDetails, getInstanceDetails } from './components/data'
55
import { getInstanceOrVnodeRect, findRelatedComponent, getRootElementsFromComponentInstance } from './components/el'
6+
import { initPerf } from './components/perf.js'
67
import { getComponentParents, instanceMap, walkTree } from './components/tree'
78
import { getInstanceName } from './components/util'
89
import { wrapVueForEvents } from './events'
@@ -91,6 +92,9 @@ export const backend = defineBackend({
9192

9293
// Plugin
9394
setupPlugin(api, app, Vue)
95+
96+
// Perf
97+
initPerf(api, app, Vue)
9498
},
9599
})
96100

‎packages/app-backend-vue2/src/plugin.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
7676
api.addTimelineEvent({
7777
layerId: ROUTER_CHANGES_LAYER_ID,
7878
event: {
79-
time: Date.now(),
79+
time: api.now(),
8080
title: to.path,
8181
data: {
8282
from,
@@ -169,7 +169,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
169169
api.addTimelineEvent({
170170
layerId: VUEX_MUTATIONS_ID,
171171
event: {
172-
time: Date.now(),
172+
time: api.now(),
173173
title: mutation.type,
174174
data,
175175
},
@@ -187,7 +187,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
187187
api.addTimelineEvent({
188188
layerId: VUEX_ACTIONS_ID,
189189
event: {
190-
time: Date.now(),
190+
time: api.now(),
191191
title: action.type,
192192
data,
193193
},
@@ -203,7 +203,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
203203
data.payload = action.payload
204204
}
205205
action._id = actionId++
206-
action._time = Date.now()
206+
action._time = api.now()
207207
data.state = state
208208

209209
api.addTimelineEvent({
@@ -219,7 +219,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
219219
},
220220
after: (action, state) => {
221221
const data: any = {}
222-
const duration = Date.now() - action._time
222+
const duration = api.now() - action._time
223223
data.duration = {
224224
_custom: {
225225
type: 'duration',
@@ -236,7 +236,7 @@ export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
236236
api.addTimelineEvent({
237237
layerId: VUEX_ACTIONS_ID,
238238
event: {
239-
time: Date.now(),
239+
time: api.now(),
240240
title: action.type,
241241
groupId: action._id,
242242
subtitle: 'end',

0 commit comments

Comments
 (0)