vue2和vue3生命周期对比

左手的ㄟ右手 2022-09-05 12:58 290阅读 0赞

下面的是vue2和3的生命周期对比，

下面的两张图是官网的图示：

vue2生命周期                                                          vue3生命周期

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

**与 2.x 版本生命周期相对应的组合式 API**

*  `beforeCreate` -> 使用 `setup()`
 *  `created` -> 使用 `setup()`
 *  `beforeMount` -> `onBeforeMount`
 *  `mounted` -> `onMounted`
 *  `beforeUpdate` -> `onBeforeUpdate`
 *  `updated` -> `onUpdated`
 *  `beforeDestroy` -> `onBeforeUnmount`
 *  `destroyed` -> `onUnmounted`
 *  `errorCaptured` -> `onErrorCaptured`

**示例代码：**

目录结构如下：

![20210818174827122.png][]

** App.vue**

<template>
      <h2>App父级组件</h2>
      <button @click="isShow=!isShow">切换显示</button>
    
      <Child v-if="isShow"/>
    </template>
    
    <script lang="ts">
    import Child from './components/Child.vue'
    import { defineComponent, ref} from 'vue'
    export default defineComponent({
      name: 'App',
      components: {
        Child
      },
      setup(){
        const isShow = ref(true)
        return {
          isShow
        }
      }
    })
    </script>

**Child.vue**

<template>
        <div>Child子级组件</div>
        <h4>msg:{
       {msg}}</h4>
        <button @click="update">更新数据</button>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
    export default defineComponent({
        name: 'Child',
        // vue2.x中的生命周期钩子
        beforeCreate(){
            console.log('2.x 中的 beforeCreate ')
        },
        created(){
            console.log('2.x 中的 created ')
        },
        beforeMount(){
            console.log('2.x 中的 beforeMount ')
        },
        mounted(){
            console.log('2.x 中的 mounted ')
        },
        beforeUpdate(){
            console.log('2.x 中的 beforeUpdate ')
        },
        updated(){
            console.log('2.x 中的 updated ')
        },
        // vue2.x中的beforeDestroy和destroyed这两个生命周期已经在vue3中改名了，所以不能再使用
        beforeUnmount(){   // 已被废弃
            console.log('2.x 中的 beforeUnmount ')
        },
        unmounted(){
            console.log('2.x 中的 unmounted ')
        },
        setup(){
            console.log('3.x中的 setup ')
            // 响应式的数据
            const msg = ref('abc');
            // 按钮点击事件的回调
            const update = () => {
                msg.value += '==='
            }
    
            onBeforeMount(() => {
                console.log('3.x 中的 onBeforeMount')
            })
            onMounted(() => {
                console.log('3.x 中的 onMounted')
            })
            onBeforeUpdate(() => {
                console.log('3.x 中的 onBeforeUpdate')
            })
            onUpdated(() => {
                console.log('3.x 中的 onUpdated')
            })
            onBeforeUnmount(() => {
                console.log('3.x 中的 onBeforeUnmount')
            })
            onUnmounted(() => {
                console.log('3.x 中的 onUnmounted')
            })
    
    
            return {
                msg, 
                update
            }
        }
    })
    </script>

根据示例代码：

初始化项目运行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 2][]

点击更新数据后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 3][]

点击切换展示：

![20210818175158741.png][]

对比可以发现 2.x和3.x运行的情况下是：

在运行情况下：3.x运行早于2.x

3.x的生命周期等在使用时都需要引入

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210818115053154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: /images/20220829/b1042f6d6160491e94e2d5581f7b53ef.png
[20210818174827122.png]: /images/20220829/8e90f144788d4cb2808f10b6877fd0c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 2]: /images/20220829/4dd2a38e6c294a7181166739fbe13722.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 3]: /images/20220829/67f814a1ac14485ba881563d317658f1.png
[20210818175158741.png]: /images/20220829/5cdcd97dfdf04857b9b0e17b8e880a68.png