is这个特性你有用过吗？主要用在哪些方面？

is 是 Vue 中的一个特殊特性，主要用于 动态组件 和 某些 HTML 标签限制下的组件渲染。

is 特性的作用

动态组件

• 可以根据变量动态切换渲染哪个组件，而不用写 v-if 一堆判断。

• 通常搭配 <component> 标签使用：

<component :is="currentComponent"></component>

<template>
  <component :is="currentView"></component>
  <button @click="currentView = 'Login'">切换到 Login</button>
  <button @click="currentView = 'Register'">切换到 Register</button>
</template>

<script>
import Login from './Login.vue'
import Register from './Register.vue'

export default {
  data() {
    return { currentView: 'Login' }
  },
  components: { Login, Register }
}
</script>

在受限制的 HTML 元素内渲染组件

• 比如在 <table>、<ul> 等标签中，直接放组件会被浏览器丢弃或渲染错误。

• is 可以解决这个问题：

<table>
  <tr is="table-row"></tr>
</table>

如果 table-row 是一个组件，使用 is 渲染是合法的。

主要使用场景

• 动态切换页面/组件（如 Tab 切换、弹窗内容）

• 表格、列表等需要特定标签的地方

• 封装通用容器，内容类型不固定

Vue 2 vs Vue 3 区别

• Vue 2：<component :is="..."> 和 HTML 标签上 is 都支持。

• Vue 3：移除了 HTML 标签的 is 用法，保留 <component :is="...">，因为 HTML 原生 is 会和 Web Components 冲突。