Vue.j--内置指令（v-cloak、v-once、v-show）

素颜马尾好姑娘i 2021-08-13 15:22 219阅读 0赞

#### v-cloak： ####

v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none；配合使用：

<div id="app" v-cloak>
        {
       {message}}
    </div>
    <script> var app = new Vue({ el: '#app', data: { message: 'hello world' } }); </script>

这时虽然已经加了指令v-cloak，但其实并没有起到任何作用，当网速较慢、Vue.js文件还没有加载完成时，在页面上会显示\{ \{message\}\}的字样，直到Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕是由闪动的。只要加一加CSS就可以解决这个问题：

[v-cloak] {
    	display: none;
    }

\*\*在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，\*\*对于简单的项目很实用，但是在具有工程化的项目里不再使用。

#### v-once： ####

v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只能渲染一次，包括元素或组件的所有子节点。首次渲染后不再随数据的变化重新渲染将被视为静态内容，例如：

<div id="myapp">
        <span v-once>{
       {str}}</span>
        <div v-once>
            <span>{
       {str}}</span>
        </div>
    </div>
    <script> var myApp = new Vue({ el: '#myapp', data: { str: '测试文本' } }); </script>

#### v-show: ####

v-show的用法与v-if基本一致，不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结果会看到元素上加载了内联样式display:none;

<div id="myApp">
        <p v-show="status === 1">当status为1时显示该行</p>
    </div>
    <script> var myApp = new Vue({ el: '#myApp', data: { status: 2 } }); </script>

#### v-if与v-show的区别 ####

v-if与v-show具有类似的功能，不过v-if才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元组/组件并不会渲染，只有当条件第一次变为真时才开始编译。

而v-show只是简单的将CSS切换，无论条件真与否，都会被编译相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换的条件。