vue2和vue3的生命周期有什么区别

Vue2和Vue3的生命周期有以下区别：

1. 移除的生命周期钩子函数：Vue3移除了一些生命周期钩子函数，包括activated、deactivated、beforeMount和errorCaptured。这些钩子函数在Vue2中用于处理组件的激活和停用、挂载前和错误捕获等情况。

2. 新增的生命周期钩子函数：Vue3引入了一些新的生命周期钩子函数，包括beforeUnmount和unmounted。beforeUnmount在组件卸载之前调用，unmounted在组件卸载之后调用。

3. 生命周期的合并：Vue3对生命周期的合并进行了优化。在Vue2中，父组件和子组件的生命周期钩子函数执行顺序是先父后子，而在Vue3中，父组件和子组件的生命周期钩子函数会同时触发，不再有先后顺序的区分。

4. 生命周期的重命名：Vue3对一些生命周期钩子函数进行了重命名。例如，beforeCreate被重命名为beforeSetup，created被重命名为setup。

5. Composition API的引入：Vue3引入了Composition API，它提供了一种新的组织组件逻辑的方式。在Composition API中，可以使用onBeforeMount、onMounted、onBeforeUnmount等函数来替代Vue2中的生命周期钩子函数。

下面是一个示例代码，演示了Vue2和Vue3的生命周期钩子函数的区别：

// Vue2
export default {
  beforeCreate() {
    console.log('Vue2 - beforeCreate')
  },  created() {
    console.log('Vue2 - created')
  },
  beforeMount() {
    console.log('Vue2 - beforeMount')
  },
  mounted() {
    console.log('Vue2 - mounted')
  },
  beforeUpdate() {
    console.log('Vue2 - beforeUpdate')
  },
  updated() {
    console.log('Vue2 - updated')
  },
  beforeDestroy() {
    console.log('Vue2 - beforeDestroy')
  },
  destroyed() {
    console.log('Vue2 - destroyed')
  }
}

// Vue3
import { onBeforeMount, onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      console.log('Vue3 - beforeMount')
    })
    onMounted(() => {
      console.log('Vue3 - mounted')
    })
    onBeforeUnmount(() => {
      console.log('Vue3 - beforeUnmount')
    })

    return {}
  }
}