vue3.0生命周期函数(vue3. Lifecycle function 0)

什么是生命周期:

vue中每个组件都是独立的,每个组件都有一个属于它的生命周期, 从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期。在vue2.x中的生命周期为

beforeCreate createdbeforeMount mountedbeforeUpdate updatedbeforeDestroy destroyedactivated deactivated errorCaptured 在vue3中,新增了一个setup生命周期函数,setup执行的时机是在beforeCreate生命函数之前执行,因此在这个函数中是不能通过this来获取实例的;同时为了命名的统一,将beforeDestroy改名为beforeUnmount,destroyed改名为unmounted,

所以vue3有以下生命周期函数:

beforeCreate(建议使用setup代替)created(建议使用setup代替)setupbeforeMount mountedbeforeUpdate updatedbeforeUnmount unmounted同时,vue3新增了生命周期钩子,我们可以通过在生命周期函数前加on来访问组件的生命周期,我们可以使用以下生命周期钩子:Composition API 形式的生命周期钩子

onBeforeMount onMountedonBeforeUpdate onUpdatedonBeforeUnmount onUnmountedonErrorCapturedonRenderTrackedonRenderTriggered当执行到对应的生命周期时,就调用对应的钩子函数:

<script>import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref} from ‘vue’ export default { setup () { // 其他的生命周期 onBeforeMount (() => { console.log(“App ===> 相当于 vue2.x 中 beforeMount”) }) onMounted (() => { console.log(“App ===> 相当于 vue2.x 中 mounted”) }) // 注意,onBeforeUpdate 和 onUpdated 里面不要修改值 onBeforeUpdate (() => { console.log(“App ===> 相当于 vue2.x 中 beforeUpdate”) }) onUpdated (() => { console.log(“App ===> 相当于 vue2.x 中 updated”) }) onBeforeUnmount (() => { console.log(“App ===> 相当于 vue2.x 中 beforeDestroy”) }) onUnmounted (() => { console.log(“App ===> 相当于 vue2.x 中 destroyed”) }) return { } }}</script>

————————

What is a lifecycle:

Each component in Vue is independent, and each component has its own life cycle. From the creation, data initialization, mounting, updating and destruction of a component, this is the so-called life cycle of a component. In vue2 The lifecycle in X is

Beforecreate createdbeforemount mountedbeforeupdate updatedbeforedestroy destroyed deactivated errorcaptured in vue3, a new setup lifecycle function is added. The timing of setup execution is before the beforecreate lifecycle function. Therefore, instances cannot be obtained through this function; At the same time, in order to unify the naming, beforedestroy is renamed beforeunmount and destroyed is renamed unmounted,

So vue3 there are the following lifecycle functions:

Beforecreate (instead of setup is recommended) created (instead of setup is recommended) setupbeforemount mountedbeforeupdate updatedbeforeunmount unmounted at the same time, vue3 adds a life cycle hook. We can access the life cycle of components by adding on before the life cycle function. We can use the following life cycle hook: the life cycle hook in the form of composition API

onBeforeMount onMountedonBeforeUpdate onUpdatedonBeforeUnmount onUnmountedonErrorCapturedonRenderTrackedonRenderTriggered当执行到对应的生命周期时,就调用对应的钩子函数:

<script>import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref} from ‘vue’ export default { setup () { // 其他的生命周期 onBeforeMount (() => { console.log(“App ===> 相当于 vue2.x 中 beforeMount”) }) onMounted (() => { console.log(“App ===> 相当于 vue2.x 中 mounted”) }) // 注意,onBeforeUpdate 和 onUpdated 里面不要修改值 onBeforeUpdate (() => { console.log(“App ===> 相当于 vue2.x 中 beforeUpdate”) }) onUpdated (() => { console.log(“App ===> 相当于 vue2.x 中 updated”) }) onBeforeUnmount (() => { console.log(“App ===> 相当于 vue2.x 中 beforeDestroy”) }) onUnmounted (() => { console.log(“App ===> 相当于 vue2.x 中 destroyed”) }) return { } }}</script>