Vue 如何监听某个组件渲染时间？

Question

场景大致如下
created会异步获取一个文件目录树，我想知道这棵树从0-1到准确渲染时间

Answer 1

尝试在异步获取到数据之后执行 console.time('render')，然后赋值完成之后再增加 $nextTick 中执行 console.timeEnd('render') 来获取执行时间。

一段伪代码：

fetchData(parmas).then(res=>{
  consle.time('render')
  this.sourceData = res.data
  this.$nextTick(()=>{
    console.timeEnd('render')
  })
})

但是会有问题，比如说其他组件同时也触发了渲染，会影响到 $nextTick 的执行。

其实最好使用 vue devtools 来查看项目里面的组件渲染时间。如果感兴趣具体如何实现的话，可以去看一下这个插件的源码。