Vue中如何使用v-cloak解决闪现问题-Vue.js-PHP中文网

Vue中如何使用v-cloak解决闪现问题

WBOY

发布： 2023-06-11 11:10:09

原创

1358人浏览过

vue是一种用于构建用户界面的渐进式框架，越来越多的开发者开始使用它在项目中开发前端界面。在使用vue的过程中，有时我们会面临到一些样式闪现的问题。这篇文章将介绍vue中如何使用v-cloak来解决这个问题。

什么是样式闪现问题？

当Vue渲染组件时，当模板中使用Vue数据绑定时，数据首先被解析，然后将数据变化导致的差异更新为DOM。这个处理过程需要一定的时间，尤其是在如果数据复杂或者dom节点很多的情况下，会导致在页面加载时，组件渲染出来时会出现短暂的样式变化的情况，这种情况就被称为样式闪现问题。

下面分别介绍以下两种实现：

1. 使用CSS的display属性

在Vue组件中，可以通过style属性设置display属性为none，然后在mounted()生命周期中修改为block。Vue组件渲染完成后，就会加载所有的CSS，这将导致组件的DOM在第一次加载之前被隐藏。

<template>
  <div class="container" v-cloak>隐藏结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

登录后复制

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

登录后复制

这种方法相对简单，适合用于简单的页面。但是如果页面很复杂或者需要加载一些异步数据，这种方式可能不太适用。那么，就可以考虑使用v-cloak实现。

立即学习“前端免费学习笔记（深入）”；

2. 使用v-cloak

v-cloak是Vue提供的指令之一，可用于隐藏未编译的Mustache语法。在将Mustache语法解析为实际值之前，v-cloak元素及其子元素将保持display:none。一旦Vue编译器准备就绪，v-cloak元素将被删除。

<template>
  <div class="container" v-cloak>显示结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

登录后复制

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

登录后复制

在组件上使用[v-cloak]指令来控制隐藏，通过

使用v-cloak的好处是它在准备好Vue编译器之后，会自动删除v-cloak元素，这样就不必手动切换display属性，简化了代码和维护。

其它解决方案

除了以上两种解决方法，我们还可以使用vue-loader中的postcss插件autoprefix进行预处理。此插件可以自动为我们添加css样式前缀，尽管不会解决全部闪烁问题，但这是一种不错的解决方案。实现如下：

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }
        ]
      }
    ]
  }
}

登录后复制