1.v-cloak
问题:在使用vue绑定数据的时候,渲染页面有时会出现变量闪烁,例如
<div id="app">
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '我是data中message的数据'
}
});
</script>
效果: 在页面加载时,有时会在页面中看到这个:
{{message}}
解决方案: 使用v-cloak
<div id="app" v-cloak>
<p>{{message}}</p>
</div>
注意:要在css代码部分写如下代码
[v-cloak] {
display: none;
}
这样:就可以防止也页面闪烁
2.v-once
解决的问题:只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点
,都会当作静态内容并跳过,这可以用于优化更新性能。
<div id="app">
<p v-once>{{message}}</p>
<input type="text" v-model="message">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '我是data中message的属性的值'
}
});
</script>
当添加v-once的指令所对应的元素, 其数据发生改变时,并不会再一次进行渲染
v-cloak和v-once 不需要表达式, 直接将指令写在开始标签中即可