1.v-once
v-once指令只渲染元素和组件一次,随后的渲染,如果使用了此指令的元素、组件及其所有子节点,则都会当作静态内容并跳过。这个特性可以用于优化更新性能。
<!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>v-once指令</title>
</head>
<body>
<div id="app">
<p> <input type="type" v-model="message"/></p>
<p v-once> 只渲染一次: {{message}} </p>
<p> 可以改变: {{message}} </p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message :"Hello"
}
})
</script>
</body>
</html>
在浏览器中运行的效果如图所示:
运行上面的示例代码,当打开浏览器页面时,DOM元素中的{{message}}渲染了message属性的值,当使用v-model绑定的输入框再次改变message属性的值时,添加了v-once指令的标签则没有发生任何变化。
2.v-cloak
v-cloak指令将会保持在DOM元素上,直到关联实例结束编译后自动移除。v-cloak指令的使用场景非常有限,常用于解决网络较慢时数据的加载问题。用户在访问Vue.js实现的网站时,如果网络延迟,网页还在加载Vue.js,便会导致Vue来不及渲染,这时页面就会显示出Vue源代码,我们就可以使用v-cloak指令来解决这一问题。
<div id="app">
{{message}}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
message :"hello world"
}
})
</script>
当网络较慢时,在浏览器中打开页面,此时会在页面中出现Vue源码,直到Vue.js加载完成并编译之后,才会显示正常的数据内容,如图所示。
为了解决上面代码运行的问题,我们可以为DOM元素添加v-cloak指令,并使用属性选择器为指定的DOM元素设置隐藏样式。v-cloak指令可以保持在DOM元素上,直到编译结束才自动移除,这样就可以在Vue完成编译之前使指定的DOM元素处于隐藏状态,等编译完成后,CSS样式就对该DOM元素无效了。
<style>
[v-clock] {
display: none;
}
</style>
<div id="app">
{{message}}
</div>
3.v-pre
v-pre指令会跳过这个元素和它的子元素的编译过程,所以可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译,代码如下:
<span v-pre>{{this will not be compiled}}</span>
在浏览器中运行的效果如图所示。