Vue3 生命周期详解

Vue3 生命周期

Vue3 中的生命周期函数可以帮助我们在组件不同阶段执行不同的操作。下面是 Vue3 中的生命周期函数以及它们的使用方法和代码解析。

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

用途

通常在这个阶段可以用来进行一些初始的数据操作，比如对 data 中的数据进行修改。

代码解析

setup(props, context) {
  console.log('beforeCreate')
  return {}
}

created

实例创建完成后被立即调用。

用途

通常在这个阶段可以用来进行一些数据的异步请求操作，比如请求后端接口获取数据。

代码解析

setup(props, context) {
  console.log('created')
  onMounted(() => {
    console.log('mounted')
  })
  return {}
}

beforeMount

在挂载开始之前被调用。

用途

通常在这个阶段可以用来进行一些 DOM 操作，比如获取 DOM 元素进行一些操作。

代码解析

setup(props, context) {
  console.log('beforeMount')
  onMounted(() => {
    console.log('mounted')
  })
  return {}
}

mounted

实例挂载之后被调用。

用途

通常在这个阶段可以用来进行一些 DOM 操作，比如使用 jQuery 对 DOM 元素进行一些操作。

代码解析

setup(props, context) {
  console.log('mounted')
  return {}
}

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

用途

通常在这个阶段可以用来进行一些数据更新之前的操作，比如获取新的数据并进行一些操作。

代码解析

setup(props, context) {
  console.log('beforeUpdate')
  onMounted(() => {
    setInterval(() => {
      this.message = new Date().toLocaleTimeString()
    }, 1000)
  })
  return {
    message: 'Hello World'
  }
}

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

用途

通常在这个阶段可以用来进行一些数据更新之后的操作，比如获取更新后的 DOM 元素进行一些操作。

代码解析

setup(props, context) {
  console.log('updated')
  onMounted(() => {
    setInterval(() => {
      this.message = new Date().toLocaleTimeString()
    }, 1000)
  })
  return {
    message: 'Hello World'
  }
}

beforeUnmount

实例销毁之前调用。

用途

通常在这个阶段可以用来进行一些清理操作，比如清除定时器。

代码解析

setup(props, context) {
  console.log('beforeUnmount')
  onMounted(() => {
    setInterval(() => {
      this.message = new Date().toLocaleTimeString()
    }, 1000)
  })
  onBeforeUnmount(() => {
    clearInterval(intervalId)
  })
  return {
    message: 'Hello World'
  }
}

unmounted

实例销毁后调用。

用途

通常在这个阶段可以用来进行一些清理操作，比如释放内存。

代码解析

setup(props, context) {
  console.log('unmounted')
  onMounted(() => {
    setInterval(() => {
      this.message = new Date().toLocaleTimeString()
    }, 1000)
  })
  onBeforeUnmount(() => {
    clearInterval(intervalId)
  })
  return {
    message: 'Hello World'
  }
}