Add user timing measurement for lifecycle hooks

[unarist]

What problem does this feature solve?

My app had performance issue due to some slow lifecycle hooks.
It would be easy to find an issue like that if Vue.config.performance API records lifecycle hooks too.

What does the proposed API look like?

With Vue.config.performance = true, I can observe timings of lifecycle hooks as like vue <Foo> mounted in "Timings" section in the devtools as well as current Vue.config.performance behavior for init/compile/render/patch events.

[unarist]

I think it would be achieved by adding mark/measure call in this function:

vue/src/core/instance/lifecycle.js

Lines 336 to 350 in 0551226

	export function callHook (vm: Component, hook: string) {
	// #7573 disable dep collection when invoking lifecycle hooks
	pushTarget()
	const handlers = vm.$options[hook]
	const info = `${hook} hook`
	if (handlers) {
	for (let i = 0, j = handlers.length; i < j; i++) {
	invokeWithErrorHandling(handlers[i], vm, null, vm, info)
	}
	}
	if (vm._hasHookEvent) {
	vm.$emit('hook:' + hook)
	}
	popTarget()
	}

like this:

 export function callHook (vm: Component, hook: string) { 
   // #7573 disable dep collection when invoking lifecycle hooks 
   pushTarget() 
   const handlers = vm.$options[hook] 
   const info = `${hook} hook` 
   if (handlers) { 
     const name = vm._name
     const id = vm._uid
     const startTag = `vue-hook-perf-start:${id}`
     const endTag = `vue-hook-perf-end:${id}`
     mark(startTag)
     for (let i = 0, j = handlers.length; i < j; i++) { 
       invokeWithErrorHandling(handlers[i], vm, null, vm, info) 
     } 
     mark(endTag)
     measure(`vue ${name} ${hook}`, startTag, endTag)
   } 
   if (vm._hasHookEvent) { 
     vm.$emit('hook:' + hook) 
   } 
   popTarget() 
 } 

[Zlmdb]

空间看空间