Vue为何弃用HTML元素上的is属性？该如何正确使用？

这是Vue专属的弃用特性吗？ #

是的，这完全是Vue 3的专属变更，和原生HTML的is属性无关。

原生HTML的is属性是用于自定义内置元素的标准特性，并没有被弃用；而Vue 3只是不再支持在原生HTML标签上通过is属性来渲染Vue组件，两者的用途和规范完全独立。

Vue中正确使用is属性的方式 #

1. 动态渲染组件：使用<component>标签 #

Vue 3要求所有通过is动态渲染的组件，必须放在<component>内置标签中，支持静态指定和动态绑定两种写法：

<template>
  <!-- 静态指定组件名称 -->
  <component is="FooComponent" />

  <!-- 动态绑定组件（比如从响应式变量获取） -->
  <component :is="activeComponent" />
</template>

2. 特殊HTML结构内渲染组件：使用v-is指令 #

在<table>、<ul>、<ol>这类有严格DOM结构限制的HTML标签内，无法直接放置Vue组件标签，此时可以用v-is指令替代原来的is属性：

<template>
  <table>
    <!-- 静态指定组件，注意值需用字符串包裹 -->
    <tr v-is="'TableRowComponent'"></tr>

    <!-- 动态绑定组件，直接传变量即可 -->
    <tr v-is="dynamicRowComponent"></tr>
  </table>
</template>

为什么Vue 3弃用了HTML元素上的is？ #

Vue 3重构了模板编译逻辑，原生HTML标签上的is会被优先识别为原生HTML属性，而非Vue的组件渲染标识。为了避免语义混淆，同时统一组件动态渲染的语法，官方决定弃用这种写法，改用<component>或v-is来实现对应功能。

内容的提问来源于stack exchange，提问作者Druckles