집 > 기사 > 웹 프론트엔드 > Vue 렌더링 시 {{}} 깜박임을 처리하는 방법

Vue 렌더링 시 {{}} 깜박임을 처리하는 방법

php中世界最好的语言원래의: 2018-05-26 13:53:571253검색

이번에는 vue 렌더링 시 {{}} 깜박임을 처리하는 방법과 vue 렌더링 시 {{}} 깜박임을 처리할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다.

v-if와 v-show는 일상적인 개발에서 가장 일반적으로 사용되는 두 가지 명령일 수 있습니다. 비슷한 기능을 가지고 있는 것처럼 보이지만 둘 사이에는 여전히 큰 차이점이 있습니다.

v-if와 v-show의 차이점:

v-if 블록을 전환할 때 Vue.js에는 부분 컴파일/제거 프로세스가 있습니다. v-if의 템플릿에 data도 포함될 수 있기 때문입니다. 바인딩 또는 하위 구성 요소를 정의합니다. v-if는 조건부 블록 내의 이벤트 리스너와 하위 구성 요소가 스위치 간에 적절하게 삭제되고 다시 작성되도록 보장하기 때문에 진정한 조건부 렌더링입니다.

v-if도 게으릅니다. 초기 렌더링에서 조건이 false이면 아무 작업도 수행되지 않습니다. 조건이 처음으로 true가 될 때만 로컬 컴파일이 시작됩니다(컴파일이 캐시됨).

이에 비해 v-show는 훨씬 간단합니다. 요소는 항상 컴파일되고 유지되며 CSS를 기반으로 간단히 전환됩니다.

간단히 말하면 둘 사이의 가장 큰 차이점은 v-if는 조건이 충족될 때만 컴파일되는 반면, v-show는 조건 충족 여부에 관계없이 항상 컴파일된다는 점입니다. CSS 표시 속성을 간단히 전환하는 것입니다.

적용 가능한 시나리오:

둘 사이의 본질적인 차이점을 이해한 후에는 v-if를 사용하는 방법과 v-show를 사용하는 경우가 더 쉬워집니다.

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

예를 들어, 이제 많은 페이지가 다양한 터미널에서 다르게 작동합니다. 가장 일반적인 점은 많은 앱 페이지가 WeChat에서 열릴 때 다운로드 프롬프트를 표시하지만 이 경우 모든 사람의 터미널 상태입니다. 결정되어 로딩 시 변경되지 않으므로 다운로드한 부분이 APP에서 열릴 때 컴파일되지 않도록 v-if를 사용하는 것이 적합합니다.

기본적으로 두 상태를 자주 전환해야 하기 때문에 페이지의 요소를 다양한 조건에 따라 표시/숨기기 등의 장소에서 사용하는 것이 가장 적합합니다. 위에서 언급한 것처럼 v-show 전환 소모량이 적기 때문입니다. v-if보다

여러 조건

코드에 여러 조건부 판단이 필요한 경우가 많지만 vue에는 v-if와 v-else만 있고 v-elseif와 같은 명령어는 없습니다. 유사한 지침은 없지만 이 문제를 해결하는 방법은 여전히 여러 가지가 있습니다.

방법 1: 템플릿

<p v-if="xxx"></p>
<template v-else>
<p v-if="yyy"></p>
<p v-else></p>
</template>

방법 2: 부분

요소는 등록된 부분 슬롯으로 부분 삽입 시 Vue에서 컴파일됩니다. 요소 자체가 교체됩니다. 요소는 name 속성을 지정해야 합니다.

이것은 javaScript의 기본 조각 요소를 연상시키지만 동일한 것은 아닙니다. Partial은 정적(Static) 부분과 동적(Dynamic) 부분으로 나뉘는데, 위의 문제를 해결하기 위해서는 동적 부분(Dynamic Partial)을 사용해야 합니다.

예:

// 注册 partial
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>')
<!-- 静态 partial -->
<partial name="my-partial"></partial>
<!-- 动态 partial -->
<!-- 渲染 partial，id === vm.partialId -->
<partial v-bind:name="partialId"></partial>

다중 조건 문제를 해결하려면 상황별로 해당 부분을 미리 등록한 다음 부분의 이름 속성을 판단 조건에 바인딩하여 다중 조건 판단을 구현할 수 있습니다.

기타:

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 페이지가 로드되면 숨겨진 요소가 나타납니다. set by v-show가 나타나서 페이지가 깜빡거립니다.

APP 커뮤니티 페이지 작성 시 몇몇 곳에서 v-show를 사용했는데, 페이지를 새로 고칠 때 로직이 거짓으로 판단되는 경우에도, 일부 요소는 표시되어서는 안되며, 그 얼굴이 순간적으로 나타나게 됩니다. 요소가 작으면 괜찮지만, 특히 큰 영역이면 매우 불쾌해 보일 것이므로 인터넷에서 검색해 보았습니다. 해결책이 있다는 것이 밝혀졌습니다.

방법 1: v-cloak

官方的解释就一句话：这个指令保持在元素上直到关联实例结束编译。

光看这句话一头雾水，后面紧接着说了用法：

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

也就是说v-cloak指令可以像CSS选择器一样绑定一套CSS样式然后这套CSS会一直生效到实例编译结束。

示例代码：

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

方法二: v-text

vue中我们会将数据包在两个大括号中，然后放到HTML里，但是在vue内部，所有的双括号会被编译成textNode的一个v-text指令。

而使用v-text的好处就是永远更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面与遇到的问题。

示例代码：

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Vue 렌더링 시 {{}} 깜박임을 처리하는 방법

관련 기사