【生命周期钩子函数】【对比Vue2和Vue3中对v-if和v-show触发父子组件生命周期钩子的不同】

最新推荐文章于 2023-12-12 17:12:40 发布

Julie_胖胖冰

最新推荐文章于 2023-12-12 17:12:40 发布

阅读量454

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Julie_bing/article/details/132170891

版权

对比Vue2和Vue3中对v-if和v-show触发父子组件生命周期钩子的不同

对比普通变量
对比组件的更新
- 先说结论
vue2测试代码
Vue3测试代码

引起好奇的原因：
在学习vue2的过程中，发现好几个博文对这个生命周期触发的说的都很矛盾，并且没有看到具体的，打开官网一看也没有看到有关对这两个生命周期函数的具体说明，只是区分了v-if是对DOM元素的修改，频繁切换不适合使用，v-show则是对css的改变，频繁切换比较适合。但是初始渲染时v-show会加载，而v-if如果为false则只会在变为true的时候加载。不过这也解释了为什么子组件中会调用create和mount系列的四个钩子。

对比普通变量

vue2中，不论是v-if还是v-show包裹普通变量或者文本都只会触发父组件的beforeUpdate和updated生命周期钩子函数。

vue3中也是一样。

对比组件的更新

与普通的变量大有不同，首先vue3的生命周期钩子函数不是beforeDestroy和destroyed，而是变成了beforeUnmount和unmounted。然后具体差别往下看：

先说结论

vue2中，v-if包裹子组件

从false转为true：父beforeUpdate、子beforeCreate、created、beforeMount、mounted、父updated。
从true转为false：父beforeUpdate、子beforeDestroyed、destroyed、父updated。

vue3中，v-if包裹子组件

从false转为true：父beforeUpdate、子beforeCreate、created、beforeMount、mounted、父updated。（与vue2相同）
从true转为false：父beforeUpdate、子beforeUnmount、unmounted、父updated。（vue2和vue3是生命周期钩子函数的不同）

vue2中，v-show包裹子组件

从false转为true：父beforeUpdate、父updated。
从true转为false：父beforeUpdate、父updated。

vue3中，v-show包裹子组件

从false转为true：父beforeUpdate、子beforeUpdate、updated、父updated。触发子组件updated。
从true转为false：父beforeUpdate、子beforeUpdate、updated、父updated。触发子组件updated。

vue2测试代码

// vue2的测试代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <Comp v-if="awesome"></Comp>
        <Comp1 v-show="awesome2"></Comp1>
        <button @click="change">click here!</button>
    </div>
    <script>
        Vue.component('comp1', {
            template: '<div id="app"><p>Comp1</p></div>',
            data() {
                return {
                }
            },
            beforeCreate() {
                console.log("Comp1:", "beforeCreate");
            },
            created() {
                console.log("Comp1:", "create");
            },
            beforeMount() {
                console.log("Comp1:", "beforeMount");
            },
            mounted() {
                console.log("Comp1:", "Mounted");
            },
            beforeUpdate() {
                console.log("Comp1:", "beforeUpdate");
            },
            updated() {
                console.log("Comp1:", "updated");
            },
            beforeDestroy() {
                console.log("Comp1:", "beforeDestroy");
            },
            destroyed() {
                console.log("Comp1:", "destroyed");
            }
        })
        Vue.component('comp', {
            template: '<div id="app"><p>Comp</p></div>',
            data() {
                return {
                }
            },
            beforeCreate() {
                console.log("Comp:", "beforeCreate");
            },
            created() {
                console.log("Comp:", "create");
            },
            beforeMount() {
                console.log("Comp:", "beforeMount");
            },
            mounted() {
                console.log("Comp:", "Mounted");
            },
            beforeUpdate() {
                console.log("Comp:", "beforeUpdate");
            },
            updated() {
                console.log("Comp:", "updated");
            },
            beforeDestroy() {
                console.log("Comp:", "beforeDestroy");
            },
            destroyed() {
                console.log("Comp:", "destroyed");
            }
        })
        new Vue({
            el: '#app',
            data: {
                message: "Hello Vue!",
                awesome: false,
                awesome2: false
            },
            methods: {
                change() {
                    this.awesome = !this.awesome;
                    this.awesome2 = !this.awesome2;
                    console.log("v-if:", this.awesome);
                    console.log("v-show:", this.awesome2);
                }
            },
            beforeCreate() {
                console.log("beforeCreate");
            },
            created() {
                console.log("create");
            },
            beforeMount() {
                console.log("beforeMount");
            },
            mounted() {
                console.log("Mounted");
            },
            beforeUpdate() {
                console.log("beforeUpdate");
            },
            updated() {
                console.log("updated");
            },
            beforeUnmount() {
                console.log("beforeUnmount");
            },
            unmounted() {
                console.log("unmounted");
            }
        })
    </script>
</body>

</html>

console.log:
vue2中改变v-if和v-show中包裹子组件的不同

Vue3测试代码

在Vue SFC Playground 在线测试的。

App.vue

// App.vue
<script>

import Comp from './Comp.vue';
import Comp1 from './Comp1.vue';
export default {
    data() {
        return {
            msg: "Hello World!",
            message: "Hello Vue!",
            awesome: false,
            awesome2: false
        };
    },
    methods: {
        change() {
            this.awesome = !this.awesome;
            this.awesome2 = !this.awesome2;
            console.log("v-if:", this.awesome);
            console.log("v-show:", this.awesome2);
        }
    },
    beforeCreate() {
        console.log("beforeCreate");
    },
    created() {
        console.log("create");
    },
    beforeMount() {
        console.log("beforeMount");
    },
    mounted() {
        console.log("Mounted");
    },
    beforeUpdate() {
        console.log("beforeUpdate");
    },
    updated() {
        console.log("updated");
    },
    beforeUnmount() {
        console.log("beforeUnmount");
    },
    unmounted() {
        console.log("unmounted");
    },
    components: { Comp, Comp1 }
}
</script>

<template>
  <div id="app">
    <p>{{ message }}</p>
    <Comp v-if="awesome"></Comp>
    <Comp1 v-show="awesome2"></Comp1>
    <button @click="change">click here!</button>
  </div>
</template>

Comp.vue

// Comp.vue
<script>
export default {
  data() {
    return {
    }
  },
  beforeCreate() {
    console.log("Comp-v-if:", "beforeCreate");
  },
  created() {
    console.log("Comp-v-if:", "create");
  },
  beforeMount() {
    console.log("Comp-v-if:", "beforeMount");
  },
  mounted() {
    console.log("Comp-v-if:", "Mounted");
  },
  beforeUpdate() {
    console.log("Comp-v-if:", "beforeUpdate");
  },
  updated() {
    console.log("Comp-v-if:", "updated");
  },
  beforeUnmount() {
    console.log("Comp-v-if:","beforeUnmount");
  },
  unmounted() {
    console.log("Comp-v-if:","unmounted");
  },
}
</script>

<template>
  <div id="app">
    <p>Comp</p>
  </div>
</template>

Comp1.vue

<script>
export default {
    data() {
        return {

        }
    },
    beforeCreate() {
        console.log("Comp1-v-show:", "beforeCreate");
    },
    created() {
        console.log("Comp1-v-show:", "create");
    },
    beforeMount() {
        console.log("Comp1-v-show:", "beforeMount");
    },
    mounted() {
        console.log("Comp1-v-show:", "Mounted");
    },
    beforeUpdate() {
        console.log("Comp1-v-show:", "beforeUpdate");
    },
    updated() {
        console.log("Comp1-v-show:", "updated");
    },
    beforeUnmount() {
        console.log("Comp1-v-show:","beforeUnmount");
    },
    unmounted() {
        console.log("Comp1-v-show:","unmounted");
    },
}
</script>

<template>
    <div id="app">
        <p>Comp1</p>
    </div>
</template>