剩余指令

这篇文章写完，我们的Vue3指令篇就要结束了，下一篇会开启我们的另一篇章。

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。让我们看看v-pre是怎么工作的，如下：

编译前

<h1 v-pre>{{count}}</h1>
<h1 v-pre>
    <span>{{count}}</span>
</h1>

编译后

<h1>{{count}}</h1>
<h1>
    <span>{{count}}</span>
</h1>

从上述代码可以看出，v-pre跳过这个元素和它的子元素的编译过程，也就是说对{{}}不再编译，直接显示。

v-cloak

v-cloak指令保持在元素上直到关联组件实例结束编译,当然它也需要合作伙伴：CSS样式[v-cloak] { display: none }，如下：

<h1 v-cloak>{{count}}</h1>

h1不会显示，直到编译结束才会显示出来。

v-once

官方说：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。如下：

//单元素
<h1 v-once>{{count}}</h1>

//有子元素
<h1 v-once>
    <h1>hello</h1>
    <span>{{count}}</span>
</h1>

//v-for
<ul>
    <li v-for="i in count" v-once>{{i}}</li>
</ul>

//组件
<my-component :count="count" v-once></my-component>

这里值得我们注意的是：当我改变count的时候，虽然单元素、v-for和组件都不在编译，但是有子元素的元素其子节点还是会发生变化。如果你有不同的看法，可以留言指证与讨论。

v-is

在 DOM 内模板使用时，模板受原生 HTML 解析规则的约束。某些 HTML 元素，如：<ul>、<ol>、<table> 和 <select> 等，对内部出现的元素有限制，而某些元素 (如：<li>、<tr> 和 <option> 只能出现在某些其他元素中。作为解决方法，我们可以对以下元素使用 v-is 指令，如下：

编译前

<table>
    <tr v-is="'h1'">
        <td>hello</td>
        <td>world</td>
    </tr>
</table>

编译后

<table><tbody>
    <h1>
        <td>hello</td>
        <td>world</td>
    </h1>
</tbody></table>

我们想把tr变成h1，直接写在代码中是编译不出来的，但是我们可以借助v-is指令来实现这一需求。如果不用v-is，渲染结果 hello world是正常字体大小，而使用的话是h1样式的字体。但是这里面需要我们主要的是：v-is的值只能是字符串,如'h1'。

is

is指令和<component>组件可以帮我们动态的去渲染组件。如下：

<button @click="com='my-component'">my-component</button>
<button @click="com='my-component2'">my-component2</button>
<component :is="com" :count="count"></component>

组件名变量com，my-component和my-component2组件需要绑定的数据count。当我们点击my-component就会渲染my-component组件。

总结

如果是自己搭建Vue3项目框架，而不是通过cli自动生成的，我们可以使用v-cloak指令。根据需求你可以给全部或者部分模块添加指令，等编译结束后才让它们显示出来。
is指令和<component>组件可以让我们在切换组件的时候更加灵活，但是在切换组件的时候它们所需的props也是我们需要特别注意的地方。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之指令篇（九）

剩余指令

v-pre

v-cloak

v-once

v-is

is

总结