Vue 목록 렌더링에 대한 자세한 설명

이번에는 Vue 리스트 렌더링에 대한 자세한 설명과 Vue 리스트 렌더링의 주의사항에 대한 자세한 설명을 가져오겠습니다. 다음은 실제 사례입니다.

Mutation 메소드는 이름에서 알 수 있듯이 이러한 메소드에 의해 호출된 원래 배열을 변경합니다. 대조적으로, filter(), concat() 및 Slice()와 같이 변경되지 않는 메서드도 있습니다. 이는 원래 배열을 변경하지 않지만 항상 새 배열을 반환합니다. non-mutation 방법을 사용할 때 이전 배열을 새 배열로 바꿀 수 있습니다.

example1.items = example1.items.filter(function (item) {  return item.message.match(/Foo/)})
<div id="example">
  <div>
    <button @click="concat()">concat</button>
    <button @click="slice()">slice</button>
    <button @click="filter()">filter</button>
  </div>
  <ul>
    <li v-for="item in items">
      {{item.list}}
    </li>
  
  </ul>
</div>
<script>
  var example = new Vue({
    el:"#example",
    data:{
      items:[
        {list:5},
        {list:6},
        {list:7}
      
      ],
      addValue:{list:10}
    },
    methods:{
      concat(){
     this.items= this.items.concat(this.addValue)
      },
      slice(){
      this.items = this.items.slice(1)
      },
      filter(){
      this.items = this.items.filter(function(item,index,arr) {
          return (index > 0)
        })
      }
    
    }
  })

위 작업으로 인해 Vue는 기존 DOM을 삭제하고 전체 목록을 다시 렌더링하지 않습니다. Vue는 DOM 요소 재사용을 최대화하기 위해 몇 가지 스마트한 경험적 방법을 구현하므로 원래 배열을 동일한 요소가 포함된 배열로 바꾸는 것은 매우 효율적인 작업입니다.

참고

JavaScript 제한으로 인해 Vue는 다음 배열 변경을 감지할 수 없습니다.

index 를 사용하여 항목을 직접 설정하는 경우, 예:

vm.items[indexOfItem] = newValue

배열의 길이를 수정하는 경우, 예:

vm.items.length = newLength

첫 번째 유형의 문제를 해결하기 위해 다음 두 가지 방법을 구현할 수 있습니다. vm.items[indexOfItem] = newValue와 동일한 효과가 있으며 statusupdate:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

도 트리거합니다. 두 번째 유형의 문제를 해결하려면 splice:

example1.items.splice(newLength)

를 사용할 수 있습니다. 이 기사의 사례를 읽고 나면 마스터하셨습니다. 더 흥미로운 방법을 알아보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

관련 읽기:

개인 즐겨찾기를 작성하기 위해 HTML에서 태그를 사용하는 방법

HTML에서 img 태그를 사용하여 사진 만들기

HTML 1에서 FAQ

위 내용은 Vue 목록 렌더링에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!