vue实现settimeout功能

Vue 中实现 setTimeout 功能

在 Vue 中可以使用原生 JavaScript 的 setTimeout 函数，但需要注意结合 Vue 的响应式系统和生命周期管理。

基本用法

export default {
  methods: {
    delayedAction() {
      setTimeout(() => {
        // 这里可以访问组件实例
        this.someMethod()
      }, 1000)
    }
  }
}

在生命周期钩子中使用

export default {
  mounted() {
    this.timer = setTimeout(() => {
      console.log('延迟执行')
    }, 2000)
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  }
}

结合响应式数据

export default {
  data() {
    return {
      message: '初始消息'
    }
  },
  methods: {
    updateMessage() {
      setTimeout(() => {
        this.message = '更新后的消息'
      }, 1500)
    }
  }
}

使用 clearTimeout 清理

export default {
  data() {
    return {
      timer: null
    }
  },
  methods: {
    startTimer() {
      this.timer = setTimeout(() => {
        // 执行操作
      }, 3000)
    },
    cancelTimer() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    }
  }
}

在 Vue 3 Composition API 中使用

import { onMounted, onUnmounted, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    let timer = null

    onMounted(() => {
      timer = setTimeout(() => {
        count.value += 1
      }, 1000)
    })

    onUnmounted(() => {
      if (timer) clearTimeout(timer)
    })

    return { count }
  }
}

注意事项

• 确保在组件销毁前清理定时器，避免内存泄漏
• 在 Vue 中使用箭头函数保持 this 的正确指向
• 对于复杂场景可以考虑使用 Vue 的 nextTick 替代部分定时需求