自定义指令的生命周期暗流：在created到unmounted之间精确介入

挖掘自定义指令的每个生命周期钩子执行时机，掌握在指令中操作DOM、监听事件、管理副作用的精妙技巧。 · 难度：入门 · +10XP

指令生命周期全解

除了常用的mounted和unmounted，自定义指令还有created、beforeMount、beforeUpdate、updated、beforeUnmount等钩子。本教程通过一个动态行为追踪指令，展示每个钩子的执行顺序与组件生命周期的关系。并实现一个高级指令v-track-performance：在created时记录初始时间，beforeUpdate时计算DOM更新耗时，unmounted时上报性能数据，展示如何利用指令钩子构建无侵入式监控系统。

// v-track.js
app.directive('track', {
  created(el, binding) {
    el.dataset.created = performance.now()
  },
  mounted(el) {
    el.dataset.mounted = performance.now()
  },
  beforeUpdate(el) {
    el.dataset.updated = performance.now()
  },
  unmounted(el) {
    const duration = performance.now() - Number(el.dataset.created)
    analytics.report(el.dataset.trackId, duration)
  }
})