Vue中解决插值表达式渲染数据闪动问题

╰+攻爆jí腚メ 2022-11-09 12:45 183阅读 0赞

#### 前言：在使用Vue的时候，经常会用到插值表达式，也就是两个大括号`{ {}}`的语法，但是有时候会出现如下问题 ####

##### 先看代码 #####

<!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>Document</title>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id="app">{
       {mes}}</div>
    
      <script> var app = new Vue({ el:'#app', data(){ return{ mes:'helloworld' } } }) </script>
    </body>
    </html>

出现的问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70]  
浏览器疯狂刷新，在某一瞬间的是内容是这样的，然后才会显示为`helloworld`，会有一个闪动的问题，这其实是因为，如果单纯的 `<div id="app">{ {mes}}</div>`一句话，浏览器是解析不出来的，而Vue它自己的语法中是去将页面的`{ {mes}}`给解析出来，呈现出来在浏览器中，但在解析这期间是需要时间的，如果电脑运行速度慢，这就会越发的明显，如某贵校的电费充值页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 1]  
为了解决这种不友好的问题，Vue官方其实给出了办法的，使用`v-cloak`指令  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 2]  
解决方法如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 3]

原理就是让为编译的给事先隐藏，上面的\[v-cloak\]指的是属性选择器。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70]: /images/20221023/d46776e830bf4f9fa53d0229a014d077.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 1]: /images/20221023/f7b8cada27014b20945eb88fd0994a5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 2]: /images/20221023/b15da141847a42b68a3939263d7b1a0b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70 3]: /images/20221023/6cb29dcadff1457f90a6b713a6c49b4a.png