Vue自定义指令 + 生命周期用法操作

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

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

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)
    }
  }
}

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 = '修改后的新数据'
    }
  }
}