집 > 기사 > 웹 프론트엔드 > Vue 페이지가 로드될 때 깜박임을 처리하는 방법

Vue 페이지가 로드될 때 깜박임을 처리하는 방법

php中世界最好的语言원래의: 2018-04-28 10:59:541348검색

이번에는 Vue 페이지 로딩 시 깜박임 처리 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

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 페이지가 로드될 때 발생하는 {{message}} 충돌을 해결하는 것입니다

방법 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 내부에서는 모든 이중 괄호가 v of textNode -text 지시문으로 컴파일됩니다.

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 + '%'
    // 父组件数据加载完前进度条最多到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 + '%'
     // 加载到百分百完成
     if (val >= 100) {
      // 关闭定时器
      clearInterval(timer)
      // 加载完成关闭进度条
      this.isShow = false
      // 加载完成的回调
      this.$emit('callback', 'load success')
      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>

Summary

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!