v-once v-pre v-cloak作用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v-once v-pre v-cloak作用相关的知识，希望对你有一定的参考价值。
这三个指令都是用来优化性能体验的：一个是搞一次不搞了 ,一个是干脆不搞 ，另一个是块遮羞布
v-once
当你只希望元素加载一次后面不再改变的时候，这个时候可以在根元素上添加这个指令。确保这些内容不会跟着数据改变而改变，只在初次页面加载时候计算一次然后缓存起来，v-once后面不用跟表达式
<div id="app">
<img v-once :src="url" >
<button @click="change">换图片</button>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577715191417&di=4b79c2be425ab4d75cbfca72b4033b8f&imgtype=0&src=http%3A%2F%2Fimg.tukexw.com%2Fimg%2Fc4083711e2477fb5.jpg"
},
methods:{
change(){
this.url = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577715191417&di=92cda882bad8242ed2a1da077373de95&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fuploads%2F2019-02-26%2F004320294.jpg"
}
}
})
</script>v-pre
一些静态的内容不需要编译加上这个指令可以加快编译，程序执行的时候就会跳过这个元素和它的子元素的编译过程。v-pre后面也不用跟表达式
<h1 v-pre>哈哈哈哈哈哈哈</h1>v-cloak
这个其实是用在网络比较差 程序执行慢或卡的时候，浏览器可能会显示出如下页面
<div id="app">
<div>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
</div>
</div>此时，模板还未挂载到页面上，真实数据还没显示出来，看起来比较丑，那怎么办 ，要不就找一个斗篷先遮住吧，等到模板挂载上去数据正常显示了，再把斗篷扔了。v-cloak后面也不用跟表达式
cloak 英[kl??k] 美[klo?k]
n. (尤指旧时的) 披风，斗篷; 遮盖物;
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
<h1>{{count}}</h1>
</div>
</div>
<script type="text/javascript">
setTimeout(function(){
const app = new Vue({
el: "#app",
data: {
count: "1111"
},
methods: {
}
})
},3000)
</script>
</body>以上是关于v-once v-pre v-cloak作用的主要内容，如果未能解决你的问题，请参考以下文章