自定义指令的典型应用场景

考察点分析 link

该题主要考察以下核心能力维度：

1. Vue高级特性理解：是否掌握自定义指令的设计哲学及适用边界
2. DOM操作场景判断：能否区分指令与组件在逻辑封装维度的差异
3. 性能优化意识：图片懒加载实现需考虑Intersection Observer等现代API的运用

具体技术评估点：

• 指令与组件的场景选择标准
• 指令生命周期钩子的正确使用
• 交叉观察器（Intersection Observer）的运用
• 资源加载的错误处理
• 内存泄漏预防机制

技术解析 link

关键知识点 link

指令生命周期 > Intersection Observer API > 加载状态管理

原理剖析 link

自定义指令(Directives)适用于需要直接DOM操作的原子级逻辑封装。当某个功能需要：

1. 与元素生命周期强绑定（如插入/移除DOM时自动执行）
2. 跨组件复用的基础行为
3. 对原生DOM进行增强式操作

相比组件封装，指令更擅长处理与组件状态无关的DOM操作。组件更适合封装具有UI结构、样式和交互逻辑的完整功能模块。

常见误区 link

• 滥用指令处理业务逻辑（应保持指令功能原子化）
• 未及时销毁观察器导致内存泄漏
• 未处理网络请求异常情况

问题解答 link

典型应用场景：

1. DOM操作增强（如自动聚焦、滚动加载）：指令可直接访问原生DOM元素，无需组件模板结构
2. 权限控制（如v-permission）：通过装饰器模式快速控制元素可见性，避免模板中条件判断污染
3. 输入限制（如自动格式化）：需要实时操作输入元素的场景更符合指令的响应式特性

图片懒加载实现思路：

  // 注册指令
Vue.directive('lazyload', {
  inserted: (el, binding) => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 替换真实图片地址
          const img = new Image()
          img.src = binding.value
          img.onload = () => el.src = binding.value
          img.onerror = () => el.classList.add('error-fallback')
          observer.unobserve(el) // 加载后解除观察
        }
      })
    }, { threshold: 0.01 })
    
    observer.observe(el)
    
    // 存储观察器实例以供卸载
    el._observer = observer
  },
  unbind: (el) => {
    el._observer?.disconnect()
  }
})
  

优化点：

1. 交叉观察阈值设为1%防止快速滚动误触发
2. 加载完成后立即解除观察节省性能
3. 增加图片加载失败处理
4. 通过指令上下文管理观察器生命周期

深度追问 link

1. 如何实现指令参数动态更新？
   答：使用update钩子比较新旧值，重置观察器

2. 如何兼容不支持Intersection Observer的浏览器？ 答：降级方案使用scroll事件+节流监听，计算元素位置

3. 指令与渲染函数的结合使用场景？
   答：在需要动态生成DOM结构时，通过渲染函数+HOC组件更合适