Vue 中有一个 is 的特性，虽然在平时的开发中，用的比较少，甚至说根本用不到，但是还是需要了解记录一下的，避免遇到 is 的使用场景的时候，不知道有这个东西。
由于 html 模板的限制，导致一些标签不能直接使用常规的方式进行封装，因此就诞生了 is 语法，来解决此类问题。
下面我们就说一下 is 语法的使用场景，以及在某些情况下如果不使用会造成的问题。
演示如下：
demo1.vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<user-list v-for="item of list" :item="item"></user-list>
</tbody>
</table>
</div>
</body>
<script>
Vue.component("user-list", {
props: ['item'],
template: "<tr><td>{{ item.id }}</td><td>{{ item.name }}</td></tr>"
})
var vm = new Vue({
el: "#app",
data: {
list: [
{id: 1, name: "lanyulei"}
]
}
})
</script>
</html>通过运行上面的代码，我们发现，如下图所示的情况：
我们发现如果使用组件的方式封装 tr 标签，然后在 tbody 中使用这个组件的话，就会导致 tr 的父级是不是 tbody，但是由于 html 的语法限制，tbody 下必须是 tr 标签，因此，在这种情况下，我们就可以通过 is 语法来修复这个问题，如下代码：
<table>
<tbody>
<tr is="user-list" v-for="item of list" :item="item"></tr>
</tbody>
</table>
需注意：经测试，在 vue-cli4 生成的代码中进行开发的话，不会出现这种问题。