vue 创建和清空定时器

可以使用Vue的生命周期函数来创建和清空定时器。在created()生命周期函数中可以创建定时器，使用clearInterval()或clearTimeout()可以清空定时器。以下是示例代码：

<template>
  <div>
    <p>{{ number }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
      timer: null,
    };
  },
  created() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.number++;
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
    },
  },
  beforeDestroy() {
    this.stopTimer();
  },
};
</script>

在上面的代码中，我们使用created()方法创建定时器，在beforeDestroy()方法中清空定时器。stopTimer()函数使用clearInterval()方法清空定时器。

相关问题

vue3setup语法糖中使用生命周期

在 Vue 3 中，使用 setup() 语法糖定义组件时，可以使用 onMounted() 和 onUnmounted() 这两个函数来实现生命周期的功能。

onMounted() 函数可以在组件挂载后执行一些操作，例如发送请求、初始化数据等。示例代码如下：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 组件挂载后执行的操作
    })

    return {}
  }
}

onUnmounted() 函数可以在组件卸载前执行一些操作，例如清空定时器、释放资源等。示例代码如下：

import { onUnmounted } from 'vue'

export default {
  setup() {
    onUnmounted(() => {
      // 组件卸载前执行的操作
    })

    return {}
  }
}

除了 onMounted() 和 onUnmounted()，Vue 3 还提供了其他的生命周期函数，例如 onUpdated()、onBeforeMount()、onBeforeUpdate()、onBeforeUnmount() 等，可以根据需要选择使用。

vue 在销毁时会做些什么

在 Vue 组件销毁时，Vue 会做以下操作：

1. 调用 beforeDestroy 钩子函数，这个函数中可以进行一些清理工作，例如取消定时器、清空变量等。

2. 销毁子组件，如果当前组件中包含了子组件，那么会先递归销毁子组件。

3. 解绑定的事件和监听器，如果当前组件中有绑定的事件和监听器，那么会在销毁时自动解绑。

4. 销毁当前组件实例，包括销毁组件的状态、占用的内存等。

5. 调用 destroyed 钩子函数，这个函数中可以进行一些最终的清理工作，例如清空缓存、释放资源等。

总之，在 Vue 组件销毁时，Vue 会进行一系列的清理工作，以确保组件的状态被正确地释放，避免出现内存泄漏等问题。