집 > 기사 > 웹 프론트엔드 > Vue 페이지 로딩시 깜빡거리는 문제 해결

Vue 페이지 로딩시 깜빡거리는 문제 해결

亚连원래의: 2018-05-28 16:14:222998검색

이 글에서는 주로 Vue 페이지 로딩 시 깜박이는 문제에 대한 해결책을 소개합니다. 이 글에서는 v-if와 v-show의 차이점과 Vue 페이지 로딩 시 {{message}} 충돌 문제를 해결하는 두 가지 방법을 소개합니다. . 관심있는 친구들, 함께 살펴보아요

v-if와 v-show의 차이점

v-if는 조건이 충족되어야만 컴파일되고, v-show는 조건에 관계없이 항상 컴파일됩니다. v -show의 표시 및 숨기기는 단순히 CSS의 표시 속성을 전환하는 것입니다.

즉, v-if를 사용할 때 값이 false이면 페이지에 이 html 태그가 생성되지 않습니다. 그리고 v-show: 해당 값이 false인지 true인지에 관계없이 html 요소가 존재합니다. 간단히 CSS의 표시 속성을 전환하면 됩니다.

사용 시나리오

일반적으로 v-if는 전환 비용이 더 높고 v-show는 초기 렌더링 비용이 더 높습니다. 따라서 자주 전환해야 하는 경우에는 v-show가 더 좋고, 런타임 시 조건이 변경될 가능성이 없을 경우에는 v-if가 더 좋습니다.

추가로

1. 템플릿 패키징 요소에는 v-if 지시문을 적용할 수 있지만 v-show는 템플릿을 지원하지 않습니다.

2. v-show를 컴포넌트에 적용하는 경우 지시문의 우선순위 v-else에 문제가 있을 것입니다. 해결책은 v-else를 다른 v-show

 // 错误
  <custom-component v-show="condition"></custom-component>
  <p v-else>这可能也是一个组件</p>
     // 正确做法
  <custom-component v-show="condition"></custom-component>
  <p v-show="!condition">这可能也是一个组件</p>

vue가 실행될 때 충돌하는 문제를 해결하는 것입니다. 페이지가 로드 중입니다

방법 1: v-cloak

v-cloak 지시어가 [v-cloak]{display:none}과 같은 CSS 규칙과 함께 사용되는 경우 이 지시어는 컴파일되지 않은 Mustache 태그를 인스턴스가 준비되었습니다.
v-cloak 명령은 CSS 선택기와 같은 CSS 스타일 세트를 바인딩할 수 있으며, 이 CSS 세트는 인스턴스가 컴파일될 때까지 적용됩니다.

  eg:
    // <p> 不会显示，直到编译结束。
    [v-cloak]{
      display:none;
        }
    <p v-cloak>
       {{ message }}
    </p>

방법 2: v-text

vue에서는 데이터를 두 개의 중괄호로 묶은 다음 HTML에 넣지만 vue 내부에서는 모든 이중 괄호가 A v-text로 컴파일됩니다. textNode에 대한 지시어입니다.

v-text를 사용하면 항상 더 나은 성능을 얻을 수 있다는 장점이 있으며, 더 중요한 것은 위에서 발생하는 문제인 FOUC(Flash of Uncompiled Content)를 피할 수 있다는 것입니다.

eg:
  <span v-text="message"></span>
  <!-- same as -->
  <span>{{message}}</span>

추가됨:

vue 페이지 로딩 진행률 표시줄 구성 요소

페이지 로딩 진행률 표시줄을 YouTube에서 처음 보았는데 나중에 거의 모든 주요 웹사이트에서 봤습니다. 그 존재로 인해 사용자를 방해합니다. 페이지를 로드할 때 완전히 빈 페이지에 멍해지는 것을 방지하여 사용자 경험을 향상합니다

그러나 개발 관점에서 이러한 종류의 진행률 표시줄의 진위 여부는 파악하기가 정말 어렵습니다. 완료되면 진행률을 계산할 수 없으며 논리 코드 자체의 진행률도 계산할 수 없습니다. 또한 모든 리소스의 로딩 상태를 모니터링하는 것은 불가능합니다.

사실 사용자는 페이지의 몇 퍼센트가 로드되는지 신경 쓰지 않지만, 실제로 관심을 갖는 것은 완전히 로드될 때까지의 시간, 빈 페이지가 완전히 로드되지 않았거나 로드 후 비어 있는지 여부입니다. . 따라서 진행률 표시줄을 "시뮬레이트"할 필요가 없으며 가짜 애니메이션 효과를 사용하여 백엔드 데이터가 반환되기 전에 로딩을 시뮬레이션하고 데이터가 반환된 후 진행률 표시줄을 읽고 숨길 필요가 없습니다.

// progress-bar.vue
<template>
 <transition name="fade">
  <p class="progress-bar" v-if="isShow">
  </p>
 </transition>
</template>
<script type="text/babel">
 export default {
  data() {
   return {
    isShow: true, // 是否显示进度条
    val: 0, // 进度
   }
  },
  props: {
   /**
    * 每10毫秒自增幅度
    */
   step: {
    type: Number,
    default: 5,
   },
   /**
    * 初始值
    */
   initVal: {
    type: Number,
    default: 0,
   },
   /**
    * 到一定进度停止
    */
   stopVal: {
    type: Number,
    default: 80,
   },
   /**
    * 进度条继续到成功
    */
   isOk: {
    type: Boolean,
    default: false,
   },
  },
  mounted() {
   // 初始化后加载进度，加载到百分之多少由stopVal决定
   this.val = this.initVal
   let step = this.step
   let timer = setInterval(() => {
    this.val = this.val + step
    this.$el.style.width = this.val + &#39;%&#39;
    // 父组件数据加载完前进度条最多到stopVal的这个百分值
    if (this.val >= this.stopVal) {
     clearInterval(timer)
     return
    }
   }, 10)
  },
  watch: {
   /**
    * 监听组件props变化决定是否继续加载，一般在父组件数据加载完后改变此标志位
    */
   isOk() {
    let val = this.val
    let step = this.step
    let timer = setInterval(() => {
     val = val + step
     this.$el.style.width = val + &#39;%&#39;
     // 加载到百分百完成
     if (val >= 100) {
      // 关闭定时器
      clearInterval(timer)
      // 加载完成关闭进度条
      this.isShow = false
      // 加载完成的回调
      this.$emit(&#39;callback&#39;, &#39;load success&#39;)
      return
     }
    }, 10)
   },
  },
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .progress-bar {
  position fixed
  top 0
  height 6px
  width 0
  background-color #999
 }
 .fade {
  &-enter-active, &-leave-active {
   transition: all .3s
  }
  &-enter, &-leave-active {
   opacity: 0
  }
 }
</style>

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

Vue 페이지 로딩시 깜빡거리는 문제 해결

관련 기사