1.v-capa
Problema : cuando se utiliza vue para vincular datos, a veces se produce un parpadeo de variables en la página renderizada, por ejemplo
<div id="app">
<p>{
{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '我是data中message的数据'
}
});
</script>Efecto: al cargar la página, a veces veo esto en la página:
{
{message}}Solución: use v-cloak
<div id="app" v-cloak>
<p>{
{message}}</p>
</div>Nota: escriba el siguiente código en la sección de código CSS
[v-cloak] {
display: none;
}De esta forma: puedes evitar que la página parpadee
2.v-una vez
El problema resuelto: solo renderice elementos y componentes una vez, y los renderizados posteriores utilizan este elemento/componente directivo y todos sus nodos secundarios.
, se tratan como contenido estático y se omiten, lo que se puede utilizar para optimizar el rendimiento de la actualización.
<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>Cuando se cambian los datos del elemento correspondiente a la instrucción v-once, no se volverá a representar
v-cloak y v-once no necesitan expresiones, simplemente escriba las instrucciones directamente en la etiqueta de inicio