vue中为什么加了v-if的内容也会先渲染一次？

Question

vue中为什么加了v-if为false的内容也会先渲染一次？
具体：每次刷新的时候都会渲染一下common组件，然后才会隐藏;但是need组件中相同条件的内容刷新没有渲染再隐藏
http://localhost:8080/#/need
App.vue根组件

<template>
  <div id="app">
    <common v-if="$route.name !== 'need'"></common>
    <router-view></router-view>
  </div>
</template>
<script>
import common from './components/common.vue'
export default {
  components: {
    common: common
  }
}
</script>

common组件

<template>
  <div class="common">
    <div style="backgroundColor:green;height200px;">common组件</div>
  </div>
</template>

对应的路由

  {
    path: '/need',
    name: 'need',
    component: () => import('../views/need.vue')
  }

need组件

<template>
  <div class="box">
    <div v-if="$route.name !== 'need'">
      <div style="height:200px;backgroundColor:red"></div>
    </div>
    <div>other content</div>
  </div>
</template>

Answer 1

看着像是因为根路径的name!== 'need'，所以一进去会加载一次