v-if涉及到元素和子组件的哪些生命周期

v-if和v-show都涉及到组件的哪些生命周期

v-if和v-show都是vue中控制元素展示与否的命令，其中，v-show的变化只转换了元素样式中的display的值，初始渲染代价高，切换代价小，适合需要频繁切换的场景，而v-if的变化会重新进行数据绑定和元素渲染，初始值为false时不会渲染。对元素或引入的组件使用v-if和v-show，涉及到组件生命周期如下：

v-show

不会影响父/子组件的生命周期。

v-if

用在元素上：

• dom发生变化，触发父组件的beforeUpdate和updated钩子函数。

用在子组件上：

• 触发父组件的beforeUpdate和updated钩子函数。
• false->true：触发子组件的beforeCreate，created，beforeMount，mounted钩子
• true->false：触发子组件beforeDestroy和destroyed钩子

通过v-if的切换刷新子组件

所以，通过切换v-if的值可以重新刷新子组件，触发created和mounted，不过在父组件中切换v-if的值时注意使用nextTick()方法，在方法中修改v-if的值，确保Vue能在这个Tick周期中收集到更新

reloadComponent(){
    this.showComponent = false
    this.$nextTick(() => {
      this.showComponent = true
    }
}