Vue 教程自定义指令 + 生命周期全解析

Vue 中的自定义指令和生命周期是前端开发的核心基础，也是面试高频考点。本文将从实用角度出发，梳理两大知识点的核心用法，内容简洁易懂，贴合实际开发场景，助力快速掌握！

一、自定义指令：高效封装 DOM 操作

自定义指令是 Vue 扩展 DOM 操作能力的核心方式，专门用来封装重复的 DOM 相关逻辑，轻量且易复用，是内置指令的重要补充。

1. 函数式自定义指令

基础极简写法，适合无多阶段控制的简单场景，函数会在指令绑定元素和数据更新时自动执行。

javascript 复制代码

// 全局注册：v-focus 输入框自动聚焦
Vue.directive('focus', (el) => {
  el.focus() // el为指令绑定的DOM元素，可直接操作
})

适用场景：输入框自动聚焦、简单文本格式化、快速修改 DOM 基础样式等。

2. 对象式自定义指令

适合逻辑复杂的场景，通过多个内置钩子函数，实现指令从绑定到解绑的全阶段精确控制，每个钩子各司其职。

javascript 复制代码

// 全局注册：对象式自定义指令
Vue.directive('指令名', {
  bind(el) { // 指令绑定元素时执行
    el.style.color = 'red'
  },
  update(el, binding) { // 数据更新时执行
    el.innerText = binding.value
  }
})

适用场景：元素拖拽、图片懒加载、DOM 事件监听 / 解绑等需要分阶段处理的逻辑。

3. 自定义指令核心总结

核心钩子执行顺序

bind（绑定）→ inserted（插入 DOM）→ update（数据更新）→ unbind（解绑）

关键注意事项

所有钩子中 this 指向 window，无法通过 this 访问组件实例；
全局注册需在 Vue 实例创建前执行，局部注册仅当前组件可用；
涉及事件 / 定时器时，务必在 unbind 中清理，避免内存泄漏。

二、Vue 生命周期：精准控制组件的 "一生"

生命周期是 Vue 组件从创建→挂载→更新→销毁的完整流程，Vue 会按固定顺序自动触发对应的钩子函数。

1. 生命周期核心阶段：挂载流程

挂载阶段是组件从初始化到渲染到页面的核心过程，开发中最常用，执行顺序固定：beforeCreate → created → beforeMount → mounted，仅执行一次。

javascript 复制代码

export default {
  data() {
    return {
      message: '生命周期演示',
      list: []
    }
  },
  beforeCreate() {
    console.log('beforeCreate：data/props 未初始化，无法访问')
  },
  created() {
    console.log('created：data/props 已初始化，可访问', this.message)
    this.getList() // 发送初始化数据请求（无需依赖DOM）
  },
  beforeMount() {
    console.log('beforeMount：模板编译完成，即将挂载到DOM')
  },
  mounted() {
    console.log('mounted：DOM已挂载，可操作', this.$el)
  },
  methods: {
    // 模拟数据请求
    getList() {
      setTimeout(() => {
        this.list = ['Vue', '自定义指令', '生命周期']
      }, 500)
    }
  }
}

beforeCreate：实例刚创建，无数据、无 DOM，几乎不用；
created：数据就绪，可访问 data/props，适合初始化数据、发送无 DOM 依赖的请求；
beforeMount：模板编译完成，未挂载 DOM，可做最后一次数据修改；
mounted：DOM 就绪，可访问 / 操作 DOM，适合初始化第三方插件、执行 DOM 相关逻辑。

2. 生命周期核心阶段：更新 + 销毁流程

更新阶段会随数据变化多次触发，销毁阶段仅执行一次，核心是清理资源，避免内存泄漏。

javascript 复制代码

export default {
  data() {
    return {
      message: '初始数据',
      timer: null
    }
  },
  created() {
    // 初始化定时器
    this.timer = setInterval(() => {
      console.log('定时器运行中')
    }, 1000)
  },
  // 更新阶段：数据变化，视图未更新时执行
  beforeUpdate() {
    console.log('beforeUpdate：数据已改，视图未更')
  },
  // 更新阶段：数据变化，视图更新完成后执行
  updated() {
    console.log('updated：数据已改，视图已更', this.message)
  },
  // 销毁阶段：组件即将卸载，实例仍可访问（核心：清理资源）
  beforeDestroy() {
    console.log('beforeDestroy：组件即将销毁，清理资源')
    clearInterval(this.timer) // 清除定时器
    this.$el = null // 释放DOM引用
  },
  // 销毁阶段：组件已卸载，数据/DOM均不可访问
  destroyed() {
    console.log('destroyed：组件已销毁，无法操作')
  },
  methods: {
    // 修改数据，触发更新阶段
    updateMsg() {
      this.message = '修改后的新数据'
    }
  }
}

3. 生命周期核心总结

整体执行顺序

创建阶段→ 挂载阶段→ 更新阶段→ 销毁阶段

核心开发原则

数据相关逻辑（请求、初始化）放 created，DOM 相关逻辑放 mounted；
数据更新后需操作 DOM，优先用 this.$nextTick，而非 updated；
组件销毁前，必须在 beforeDestroy 中清理所有资源（定时器、事件、插件实例）；

总结

自定义指令和生命周期是 Vue 开发的基础中的基础，也是进阶的关键：

自定义指令：让 DOM 操作更高效、更复用，核心是按需选择函数式 / 对象式，做好资源清理；
生命周期：让组件行为更可控，核心是分清数据就绪和 DOM 就绪时机，牢记销毁阶段清理资源。

如果觉得本文对你有帮助，欢迎点赞 + 收藏 + 关注，后续持续分享 Vue 实用开发技巧和核心知识点解析～

Vue 教程 自定义指令 + 生命周期全解析

一、自定义指令：高效封装 DOM 操作

1. 函数式自定义指令

2. 对象式自定义指令

3. 自定义指令核心总结

二、Vue 生命周期：精准控制组件的 "一生"

1. 生命周期核心阶段：挂载流程

2. 生命周期核心阶段：更新 + 销毁流程

3. 生命周期核心总结

总结

Vue 教程自定义指令 + 生命周期全解析