【刨根问底】v-if 和 v-show 到底触发了哪些生命周期钩子？
站长
· 阅读数 17
引起好奇的原因：
在学习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:
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>
console.log:
