为什么 Vue 组件需要一个 name

最近写代码得时候想了解下这个问题，经常感觉可写可不写，顺手查了下网上资料

1、对调试代码有帮助

写了name后，可以在vue-devtools看到组件名称，比较方便定位吧。我测试了下，还是可以的

2、递归组件

Vue的组件还可以递归使用自己作为自己的组件？？？？？

好吧，我不会，我是菜鸡，据说递归使用的时候必须要加name这个属性，否则会报错。我也不会用，就不试了。

3、keep-alive的时候用来指定保存对象

简单来说，假设你切换tab的功能，然后下面有多个组件，你想让其中一个保持状态，你就可以写，我抄代码来了。

<template>
  <div>
    {{ val }} <input type="text" v-model="m" />
  </div>
</template>

<script>
// Foo.vue
  export default {
    name: 'vue-foo',
    data () {
      return {
        val: 'vue-foo',
        m: 'vue-foo'
      }
    }
  }
</script>

<template>
  <div>
    <keep-alive include="vue-foo">
      <Foo v-if="visible" />
      <Bar v-else />
    </keep-alive>
    <Button @click="visible = !visible">
      Visible {{ visible }}
    </Button>
  </div>

</template>

<script>
import Foo from './components/Foo'
import Bar from './components/Bar'

export default {
  name: 'app',
  data () {
    return {
      visible: true
    }
  },
  components: {
    Foo,
    Bar
  }
}
</script>

Foo的状态就会被保存下来，而Bar的状态不会被保存

具体的看大佬：

https://lazzzis.moe/post/name-attribute-in-vue-component/