vue 2 와 vue 3 의 v-if 와 v-for 우선 순위 비교 학습

Vue.js 에서 가장 많이 사용 되 는 두 가지 명령 은v-if과v-for이기 때문에 우 리 는 그것들 을 동시에 사용 하고 싶 을 것 이다.비록 정부 에서 이렇게 하 는 것 을 건의 하 지 는 않 지만,때로는 확실히 필요 하 다.우 리 는 그들의 업무 방식 을 알 아 보 자.

vue 2.x 에서 한 요소 에v-if와v-for를 동시에 사용 할 때v-for가 우선 합 니 다.

vue 3.x 에서v-if는 항상v-for보다 우선 적 으로 효력 이 발생 한다.

대비 학습
그 다음 에 우 리 는 간단 한 예 시 를 통 해 우리 가 아주 간단 한 todoList 효 과 를 실현 하고 싶다 고 가정 한다.

우 리 는 todoList 가 있 습 니 다.

const todoList = [
 {
 id: 0,
 task: '  ',
 done: true,
 },
 {
 id: 1,
 task: '  ',
 done: false,
 },
 {
 id: 2,
 task: '  ',
 done: true,
 },
 // ...,
];

vue 2 에서v-for우선 순위 가v-if보다 높 으 면 우 리 는 이렇게 실현 할 수 있다.

<ul>
 <!-- vue2 ，v-for     v-if -->
 <li v-for="item in todoList" v-if="!item.done" :class="{todo: !item.done}" :key="item.id">
 <span>{{item.task}}</span>
 </li>
</ul>

<ul>
 <li v-for="item in todoList" v-if="item.done" :class="{finished: item.done}" :key="item.id">
 <span>{{item.task}}</span>
 </li>
</ul>

vue 3 에 서 는v-if우선 순위 가v-for보다 높 기 때문에 vue 2 처럼v-for와v-if를 같은 요소 에 놓 을 수 없습니다.우 리 는li밖 에 for 순환 을 수행 하 는 데 사용 합 니 다.

<ul>
 <template v-for="item in list" :key="item.id">
 <li v-if="!item.done" :class="{todo: !item.done}">
  <span>{{item.task}}</span>
 </li>
 </template>
</ul>
<ul>
 <template v-for="item in list" :key="item.id">
 <li v-if="item.done" :class="{finished: item.done}">
  <span>{{item.task}}</span>
 </li>
 </template>
</ul>

vue 2.x 에서v-if와v-for가 같은 요소 에서 사용 하면 vue 3.x 에서 직접 호 환 할 수 없 음 을 알 수 있다.
최선 의 실천v-if와v-for의 사용 에 대해 정 부 는 우리 에 게 계산 속성 을 사용 하여 처리 하 라 고 건의 했다.그러면 성능 도 향상 시 킬 뿐만 아니 라 vue 3.x 까지 호 환 할 수 있다.그 다음 에 우 리 는 계산 속성 실현 방식 을 살 펴 보 자.
템 플 릿 부분:

<div id="app">
 <!--      -->
 <ul class="todo-list">
 <li v-for="item in todos" class="todo" :key="item.id">
  <span>{{item.task}}</span>
 </li>
 </ul>

 <ul v-if="showFinished">
 <li v-for="item in finished" :key="item.id" class="finished">
  <span>{{item.task}}</span>
 </li>
 </ul>

 <p>
 show finished？
 <input type="checkbox" v-model="showFinished" />
 {{showFinished ? 'yes' : 'no'}}
 </p>
</div>

js 부분:

// vue3.x
Vue.createApp({
 data() {
 return {
  msg: 'Todo List',
  showFinished: true,
  list: todoList,
 };
 },
 computed: {
 finished() {
  return todoList.filter(t => t.done);
 },
 todos() {
  return todoList.filter(t => !t.done);
 },
 },
}).mount('#app');

// vue2.x
new Vue({
 el: '#app',
 data() {
 return {
  msg: 'Todo List',
  showFinished: true,
  list: todoList,
 };
 },
 computed: {
 finished() {
  return todoList.filter(t => t.done);
 },
 todos() {
  return todoList.filter(t => !t.done);
 },
 },
});

클릭 하여 보기:vue 3 예시,vue 2 예시
총결산

vue 2.x 중v-for우선 순위 가v-if보다 높 고 vue 3.x 는 반대 이다.

같은 요소 에서 동시에 사용v-if과v-for을 피하 고 계산 속성 으로 대체 하 는 것 을 권장 합 니 다.

vue 2 와 vue 3 에 관 한 v-if 와 v-for 우선 순위 비교 학습 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 v-if 와 v-for 우선 순위 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!