How to use v-cloak to solve flash problems in Vue

Vue is a progressive framework for building user interfaces. More and more developers are beginning to use it to develop front-end interfaces in projects. In the process of using Vue, sometimes we will face some style flashing problems. This article will introduce how to use v-cloak in Vue to solve this problem.

What is the style flash problem?

When Vue renders a component, when Vue data binding is used in the template, the data is first parsed, and then the differences caused by the data changes are updated to the DOM. This process takes a certain amount of time, especially if the data is complex or there are many DOM nodes, it will cause a brief style change when the component is rendered when the page is loaded. This situation is called a style. Flash question.

The following two implementations are introduced respectively:

1. Using the display attribute of CSS

In the Vue component, you can set the display attribute to none through the style attribute, and then Modified to block during mounted() life cycle. After the Vue component is rendered, all CSS is loaded, which will cause the component's DOM to be hidden until it is first loaded.

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

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

This method is relatively simple and suitable for simple pages. But if the page is complex or needs to load some asynchronous data, this method may not be suitable. Then, you can consider using v-cloak to implement it.

2. Use v-cloak

v-cloak is one of the directives provided by Vue, which can be used to hide uncompiled Mustache syntax. The v-cloak element and its children will remain display:none until the Mustache syntax is parsed into an actual value. Once the Vue compiler is ready, the v-cloak elements will be removed.

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

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

Use the [v-cloak] directive on the component to control hiding, set the style through c9ccee2e6ea535a969eb3f532ad9fe89, and set the element to the hidden state. In this way, before the Vue instance is loaded, even if the component contains many time-consuming operations such as asynchronous requests and calculated properties, we can keep the component hidden and avoid style flashing problems.

The advantage of using v-cloak is that it will automatically delete the v-cloak element after preparing the Vue compiler, so that you do not have to manually switch the display attribute, simplifying the code and maintenance.

Other solutions

In addition to the above two solutions, we can also use the postcss plug-in autoprefix in vue-loader for preprocessing. This plugin can automatically add css style prefixes for us. Although it will not solve all flickering problems, it is a good solution. The implementation is as follows:

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

Summary

There are many ways to solve the style flash problem, and the above two methods can achieve the expected results. Using v-cloak is one of the best ways to build an overall look, but be aware that in many cases JavaScript will disable animations for display:none elements. Therefore, when using v-cloak, be careful in selecting elements that require animation effects.

The above is the detailed content of How to use v-cloak to solve flash problems in Vue. For more information, please follow other related articles on the PHP Chinese website!