- Vue2和Vue3的生命周期对比
| 选项式API下的生命周期钩子 | 组合式API下的生命周期钩子 |
|---|---|
| beforeCreate | 不需要，直接写到setup函数中 |
| created | 不需要，直接写到setup函数中 |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroyed | onBeforeUnmount |
| destroyed | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |
- 示例
<script>
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
} from 'vue'export default {setup () {onBeforeMount (() => {console.log("相当于 vue2.x 中 beforeMount")})onMounted (() => {console.log("相当于 vue2.x 中 mounted")})onBeforeUpdate (() => {console.log("相当于 vue2.x 中 beforeUpdate")})onUpdated (() => {console.log("相当于 vue2.x 中 updated")})onBeforeUnmount (() => {console.log("相当于 vue2.x 中 beforeDestroy")})onUnmounted (() => {console.log("相当于 vue2.x 中 destroyed")})return {}}
}
</script>
-
生命周期图示
