Vue 中可以提高运行效率的内置指令：v-cloak ，v-once， v-pre-阿里云开发者社区

Vue 中可以提高运行效率的内置指令：v-cloak ，v-once， v-pre

2023-08-29 109

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

全局流量管理 GTM，标准版 1个月

云解析 DNS，旗舰版 1个月

公共DNS（含HTTPDNS解析），每月1000万次HTTP解析

简介： Vue 中可以提高运行效率的内置指令：v-cloak ，v-once， v-pre

Vue内置指令 v-cloak、v-once、v-pre：

v-cloak 指令用于：当网速较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码（类似 {{xxx}} 这种）。可以用 v-cload 配合 CSS 解决这个问题。

v-once 指令用于：只渲染一次，首次渲染后，就不会再随着数据的变化而重新渲染了。它也可以用在组件上，使组件只加载一次。

v-pre 指令用于：不让 Vue 解析这个标签，直接输出到页面中。

v-cloak使用方法：

[v-cloak]{
  display: none !important;
}

<div id="APP">
  <p v-cloak>{{name}}</p>
</div>

注：v-cloak 本质上是一个特殊属性，Vue 实例创建完毕并接管容器后，就会删掉 v-cloak 这个属性。

const vm = new Vue({
  el: "#APP",
  data(){
    return {
      name: "张三"
    }
  }
});

v-once 使用方法：

<div id="APP">
  <p v-once>初始化的num值是：{{num}}</p>
  <p>当前的num值是：{{num}}</p>
  <button @click="num++">点击num加1</button>
</div>

const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 1
    }
  }
});

注：当点击按钮时，添加了 v-once 的标签不会再重新渲染。

v-pre 使用方法：

<div id="APP">
  <p v-pre>不让解析：{{num}}</p>
  <p>正常解析：{{num}}</p>
</div>

const vm = new Vue({
  el: "#APP",
  data(){
    return {
      num: 99
    }
  }
});

注：Vue 在解析内容时，会跳过带有 v-pre 指令的标签。

原创作者：吴小糖

创作时间：2023.2.22

Vue 中可以提高运行效率的内置指令：v-cloak ，v-once， v-pre