vue通过props中的值，控制子组件根元素中的 v-if，此时子组件页面的渲染是怎么一回事？

Question

一、过程

父组件中通过 props 传值去控制子组件中根元素的 v-if，来控制子组件的显示和隐藏。

1、父组件的代码：tttt只是为方便在 F12 看dom元素是不是出现

<template>
  <div>
    <button @click="visible=true">显示子组件</button>
    <son
      class="tttttttttttttttttttttttttttt"
      :visible="visible"
      @close="onClose"
    ></son>
  </div>
</template>

<script>
import son from './son.vue'
export default {
  components: {
    son
  },
  data () {
    return {
      visible: false
    }
  },
  beforeCreate () {
    console.log('father beforeCreate')
  },
  created () {
    console.log('father created')
  },
  beforeMount () {
    console.log('father beforeMount')
  },
  mounted () {
    console.log('father mounted')
  },
  beforeDestroy () {
    console.log('father beforeDestroy')
  },
  destroyed () {
    console.log('father destroyed')
  },
  methods: {
    onClose () {
      this.visible = false
    }
  }
}
</script>

<style>

</style>

2、子组件的代码

<template>
  <div v-if="visible">
      <h1>子组件</h1>
      <button @click="onClose">返回</button>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  beforeCreate () {
    console.log('son beforeCreate')
  },
  created () {
    console.log('son created')
  },
  beforeMount () {
    console.log('son beforeMount')
  },
  mounted () {
    console.log('son mounted')
  },
  beforeDestroy () {
    console.log('son beforeDestroy')
  },
  destroyed () {
    console.log('son destroyed')
  },
  methods: {
    onClose () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="less" scoped>
  div {
    background-color: skyblue;
  }
</style>

3、效果图

4、当页面打开的时候，一开始子组件是不会显示出来的，在F12中看到的元素如下

此时的打印是，把子组件的生命周期都执行了一次。

点击显示子组件，打印没有任何的变化。

二、疑惑

子组件的生命周期为什么在false的时候，执行了，此时它挂在了什么东西到页面上去。它是不是跟 父组件在使用 son那里有关系？？？显示隐藏并没有涉及到创建与销毁。
在官网上看到复用情况，但是这好像没有复用。。一直也想不明白这个现象是怎么回事，望大佬们指教一下，谢谢。

如果我尝试下边这种方式去控制，那v-if就涉及了子组件的创建，销毁，跟预想的一样。

    <son
      v-if="xxxx"
      class="tttttttttttttttttttttttttttt"
      :visible="visible"
      @close="onClose"
    ></son>

Answer 1

先定义： 方案1 v-if 控制， 方案2 用visible控制子组件的根节点。

方案1 在 v-if 为false 时会销毁组件实例，为true 时，创建新的组件实例，所以在切换条件的时候，son 组件中的声明周期钩子函数会执行

方案 2 ，通过 visible 控制 son 的根节点，其实组件son的实例会初始化，即使初始值是false，然后一直都在，只不过在 visible 为false 时没有元素渲染到页面上。所以在切换visible的时候，只决定son 组件要不要显示内容，不会销毁或创建新的son 组件实例。所以生命周期不会执行，但这时你可以在son中添加一个watch - visible ，可以监听到visible 的变化。

visible 控制son 模版的根节点，只控制了 son 显示哪些内容，不控制 son 组件本身。