이번에는 Vue 페이지 로딩 및 깜박임을 방지하는 방법을 알려드리겠습니다. 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>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
위 내용은 Vue 페이지 로딩이 깜박이는 것을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
