vue 렌더링 시 {{}}가 깜박이는 문제와 해결책

v-if와 v-show는 아마도 일상적인 개발에서 가장 일반적으로 사용되는 두 가지 명령일 것입니다. 비슷한 기능을 가지고 있는 것처럼 보이지만 둘 사이에는 여전히 큰 차이점이 있습니다. 다음으로, 이 글을 통해 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: template

<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(&#39;my-partial&#39;, &#39;<p>This is a partial! {{msg}}</p>&#39;)
<!-- 静态 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 페이지 로딩 시 페이지가 깜박이는 문제가 있습니다 APP 커뮤니티 페이지 작성 시 페이지 새로 고침을 하다가 곳곳에서 v-show를 사용하는 현상이 발견되었습니다. 논리가 거짓이라고 판단되면 일부 요소가 표시되어서는 안 될 때 얼굴이 표시됩니다. , 깜박이고 요소가 작으면 괜찮았지만 특히 큰 장소라면 매우 보일 것입니다. 불편해서 혹시 해결책이 있을까 싶어서 온라인으로 검색해 봤는데, 실제로 해결책이 있는 것으로 나타났습니다.

방법 1: v-cloak

공식 설명은 단 한 문장입니다. 이 명령은 연결된 인스턴스가 컴파일을 끝낼 때까지 요소에 남아 있습니다.

이 문장만 읽어도 헷갈리는데 사용법은 바로 따라옵니다.

등의 CSS 규칙과 함께 사용하면 이 지시어는 인스턴스가 준비될 때까지 컴파일되지 않은 Mustache 태그를 숨길 수 있습니다.

[v-cloak] { display: none } 즉, v-cloak 지시문은 CSS 선택기와 같은 CSS 스타일 세트를 바인딩할 수 있으며, 이 CSS 세트는 인스턴스가 컴파일될 때까지 적용됩니다.

샘플 코드:

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

방법 2: v-text

vue에서는 데이터를 두 개의 중괄호로 묶은 다음 HTML에 넣을 것이지만 vue 내부에서는 모두 double입니다. textNode의 v-text 지시문으로 컴파일됩니다.

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

示例代码：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

零基础学习AJAX之AJAX框架

零基础学习AJAX之制作自动校验的表单

ajax的get请求时缓存处理解决方法

위 내용은 vue 렌더링 시 {{}}가 깜박이는 문제와 해결책의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!