vue2에서는 v-for가 v-if보다 우선순위가 높으며, vue3에서는 v-if가 v-for보다 우선순위가 높습니다. Vue에서는 동일한 요소에 v-if와 v-for를 동시에 사용하지 마십시오. 그러면 성능이 낭비됩니다(각 렌더링은 먼저 반복된 다음 조건부 판단을 수행합니다). 외부 레이어에 중첩될 수 있으며(페이지 렌더링은 DOM 노드를 생성하지 않음) 이 레이어에서 v-if 판단이 수행된 다음 내부적으로 v-for 루프가 수행됩니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
v-if
지시문은 콘텐츠를 조건부로 렌더링하는 데 사용됩니다. 지시문은 콘텐츠 블록을 조건부로 렌더링하는 데 사용됩니다. 이 콘텐츠는 지시문의 식이 true를 반환하는 경우에만 렌더링됩니다. v-for
지시문은 배열을 기반으로 목록을 렌더링합니다. v-for
지시문에는 item in items
형식의 특수 구문이 필요합니다. 여기서 items
는 소스 데이터 배열 또는 객체이고 item는 반복되는 배열 요소의 별칭입니다. <code>v-if
指令用于条件性地渲染一块内容。指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用item in items
形式的特殊语法,其中items
是源数据数组或者对象,而item
则是被迭代的数组元素的别名。
在v-for
的时候,建议设置key
值,并且保证每一个key
值都是独一无二的,这便是diff
算法进行优化。
<modal></modal>
优先级
其实在vue2和vue3中的答案是截然相反的。
在vue2中,v-for的优先级高于v-if
在vue3中,v-if的优先级高于v-for
vue2中的v-for和v-if
v-if
和v-for
都是vue
模板系统中的指令。
在vue
模板编译的时候,会将指令系统转化为可执行的render
函数。
编写一个p
标签,同时使用v-if
和v-for
<div> <p> {{ item.title }} </p> </div>
创建vue
示例,存放isShow
和items
数据。
const app = new Vue({ el: "#app", data() { return { items: [ { title: "foo" }, { title: "baz" }] } }, computed: { isShow() { return this.items && this.items.length > 0 } } })
ƒ anonymous() { with (this) { return _c('div', { attrs: { "id": "app" } }, _l((items), function (item) { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) } }
_l
是vue
的列表渲染函数,函数内部都会进行一次if
判断。
初步得到结论:v-for
优先级是比v-if
高。
再将v-for
与v-if
置于不同标签
<div> <template> <p>{{item.title}}</p> </template> </div>
再输出下render
函数
ƒ anonymous() { with(this){return _c('div',{attrs:{"id":"app"}}, [(isShow)?[_v("\n"), _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)} }
这时候我们可以看到,v-for
与v-if
作用在不同标签时候,是先进行判断,再进行列表的渲染。
export function genElement (el: ASTElement, state: CodegenState): string { if (el.parent) { el.pre = el.pre || el.parent.pre } if (el.staticRoot && !el.staticProcessed) { return genStatic(el, state) } else if (el.once && !el.onceProcessed) { return genOnce(el, state) } else if (el.for && !el.forProcessed) { return genFor(el, state) } else if (el.if && !el.ifProcessed) { return genIf(el, state) } else if (el.tag === 'template' && !el.slotTarget && !state.pre) { return genChildren(el, state) || 'void 0' } else if (el.tag === 'slot') { return genSlot(el, state) } else { // component or element ... }
在进行if
判断的时候,v-for
是比v-if
先进行判断。
最终v-for
优先级比v-if
高。
vue3中的v-for和v-if
在vue3中,v-if的优先级高于v-fo,所以v-if执行时,它调用的变量还不存在,就会导致异常
说明:通常有两种情况下导致我们这样做:
1.为了过滤列表中的项目,比如:
v-for="user in users" v-if="user.isActive"
此时定义一个计算属性(比如 activeUsers
),让其返回过滤后的列表即可(比如users.filter(u=>u.isActive)
)。
2.为了避免渲染本应该被隐藏的列表
v-for="user in users" v-if="shouldShowUsers"
此时把v-if
移动至容器元素上(比如ul
、ol
)或者外面包一层template
v-for
의 경우 key
값을 설정하고 각 key
값이 고유한지 확인하는 것이 좋습니다. diff 알고리즘이 최적화되었습니다. <template v-if="isShow"> <p v-for="item in items"> </template>Priority 사실 vue2와 vue3의 답변은 완전히 반대입니다.
v-if
및 v-for
는 모두 vue
템플릿 시스템의 명령입니다. 🎜🎜 vue
템플릿이 컴파일되면 명령 시스템이 실행 가능한 render
함수로 변환됩니다. 🎜🎜p
태그를 작성하고 v-if
와 v-for
를 모두 사용하세요🎜computed: { items: function() { return this.list.filter(function (item) { return item.isShow }) } }🎜
vue
만들기 예 , isShow
및 items
데이터를 저장합니다. 🎜rrreeerrreee🎜_l
는 vue
의 목록 렌더링 함수이며, 함수 내부에서 if
판단이 수행됩니다. v-for
는 v-if
보다 우선순위가 높습니다. v-for
와 v-if
를 다른 태그 🎜rrreee🎜에 배치한 다음 render
함수를 출력합니다 🎜rrreee🎜this v-for
와 v-if
가 서로 다른 태그에 사용될 때 먼저 판단된 다음 목록이 렌더링되는 것을 볼 수 있습니다. 🎜rrreee🎜if
판단 시 v-if
이전에 v-for
가 판단됩니다. 🎜🎜결국 v-for
가 v-if
보다 우선순위가 높습니다. 🎜🎜🎜vue3의 v-for 및 v-if🎜🎜🎜vue3에서는 v-if가 v-fo보다 우선순위가 높기 때문에 v-if가 실행될 때 호출하는 변수가 아직 존재하지 않습니다. 예외 🎜🎜🎜설명: 🎜이 작업을 수행하는 데는 일반적으로 두 가지 상황이 있습니다. 🎜🎜1 다음과 같이 목록의 항목을 필터링하려면 🎜rrreeeactiveUsers
)을 정의하고 필터링된 목록(예: users.filter(u=>u.isActive)
)만 반환합니다. 🎜🎜2. 숨겨야 할 목록이 렌더링되는 것을 방지하기 위해🎜rrreeev-if
를 컨테이너 요소(예: ul
, ol
)로 이동하세요. >) 또는 템플릿
레이어로 래핑하면 됩니다. 🎜🎜🎜🎜Notes🎜🎜🎜🎜동일한 요소에 v-if와 v-for를 동시에 사용하지 마십시오. 이는 성능 낭비를 초래합니다(각 렌더링은 먼저 루프를 수행한 다음 조건부 판단을 수행합니다)🎜🎜🎜🎜 이러한 상황을 피하려면 템플릿을 외부 레이어에 중첩하고(페이지 렌더링은 dom 노드를 생성하지 않음) 이 레이어에서 v-if 판단을 수행한 다음 내부적으로 v-for 루프를 수행합니다🎜🎜🎜rrreee🎜🎜🎜if 조건이 발생하면 루프 내부에서 표시할 필요가 없는 항목을 계산된 속성을 통해 미리 필터링할 수 있습니다🎜computed: { items: function() { return this.list.filter(function (item) { return item.isShow }) } }
위 내용은 vue에서 v-if 또는 v-for 중 어느 것이 더 높은 우선순위를 갖습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!