Vue 렌더링 페이지의 깜박이는 {{}} 처리 방법

이번에는 vue 렌더링 페이지의 깜박이는 {{}}를 처리하는 방법을 보여 드리겠습니다. vue 렌더링 페이지의 깜박이는 {{}}를 처리할 때 주의 사항은 무엇입니까? 보세요.

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

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

v-if 블록을 전환할 때 Vue.js에는 부분 컴파일/제거 프로세스가 있습니다. v-if의 템플릿에 데이터 바인딩도 포함될 수 있기 때문입니다. 또는 하위 구성 요소. 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 페이지가 로드되면 숨겨진 요소는 다음에 의해 설정됩니다. 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双向数据绑定实例详解

위 내용은 Vue 렌더링 페이지의 깜박이는 {{}} 처리 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!