Vue 배열 업데이트 및 필터 정렬 기능

앞 말
Vue 는 목록 렌 더 링 기능 을 추가 하기 위해 배열 을 관찰 하 는 방법 을 추가 하 였 으 며,한 배열 의 필터 나 정렬 된 복사 본 을 표시 할 수 있 습 니 다.본 고 는 Vue 배열 의 업데이트 와 여과 순 서 를 상세 하 게 소개 할 것 이다.
변이 방법
Vue 는 관찰 배열 의 변 이 를 관찰 하 는 방법 을 포함 하고 있 으 며,보기 업 데 이 트 를 촉발 합 니 다.다음 방법 을 포함 합 니 다.
push()는 임의의 수량의 인 자 를 받 아들 여 배열 의 끝 에 하나씩 추가 하고 수 정 된 배열 의 길 이 를 되 돌려 줍 니 다.
pop()은 배열 의 끝 에서 마지막 항목 을 제거 하고 배열 의 length 값 을 줄 인 다음 제거 한 항목 을 되 돌려 줍 니 다.
shift()는 배열 의 첫 번 째 항목 을 제거 하고 이 항목 을 되 돌려 주 며 배열 의 길 이 를 1 로 줄 입 니 다.
unshift()는 배열 전단 에 임의의 항목 을 추가 하고 새 배열 의 길 이 를 되 돌려 줍 니 다.
splice()는 원래 배열 의 일부 구성원 을 삭제 하고 삭 제 된 위치 에 새 배열 구성원 을 추가 할 수 있 습 니 다.
sort()는 각 배열 항목 의 toString()방법 을 호출 한 다음 비교 한 문자열 정렬 을 통 해 정렬 된 배열 로 되 돌려 줍 니 다.
reverse()는 배열 의 순 서 를 반전 시 키 고 정렬 을 거 친 배열 을 되 돌려 줍 니 다.

<div id="example">
 <div>
 <button @click='push'>push</button>
 <button @click='pop'>pop</button>
 <button @click='shift'>shift</button>
 <button @click='unshift'>unshift</button>
 <button @click='splice'>splice</button>
 <button @click='sort'>sort</button>
 <button @click='reverse'>reverse</button>
 </div>
 <ul>
 <li v-for="item in items" >
  {{ item.message }}
 </li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 items: [
  {message: 'Foo' },
  {message: 'Bar' },
  {message: 'Baz' }
 ],
 addValue:{message:'match'}
 },
 methods:{
 push(){
  this.items.push(this.addValue)
 },
 pop(){
  this.items.pop()
 },
 shift(){
  this.items.shift()
 },
 unshift(){
  this.items.unshift(this.addValue)
 },
 splice(){
  this.items.splice(0,1)
 },
 sort(){
  this.items.sort()
 },
 reverse(){
  this.items.reverse()
 },
 }
})
</script>

비 변이 방법
변이 방법(mutation method)은 말 그대로 이 방법 에 의 해 호출 된 원시 배열 을 바 꿀 수 있 습 니 다.이에 비해 비 변이(non-mutating method)방법 도 있다.예 를 들 어 filter(),concat(),slice().원본 배열 은 바 뀌 지 않 지만 항상 새 배열 로 돌아 갑 니 다.비 변이 방법 을 사용 할 때,새 배열 로 오래된 배열 을 교체 할 수 있다.
concat()는 현재 배열 의 사본 을 만 든 다음 받 은 매개 변 수 를 이 사본 의 끝 에 추가 하고 마지막 으로 새로 구 축 된 배열 로 돌아 갑 니 다.
slice()는 현재 배열 의 하나 이상 의 항목 을 기반 으로 새 배열 을 만 들 고 하나 또는 두 개의 인 자 를 받 아들 입 니 다.즉,항목 의 시작 과 끝 위 치 를 되 돌려 주 고 마지막 으로 새 배열 로 돌아 갑 니 다.
map()는 배열 의 모든 실행 주어진 함수 에 대해 매번 함수 호출 결과 로 구 성 된 배열 을 되 돌려 줍 니 다.
filter()는 배열 의 모든 항목 에 주어진 함 수 를 실행 합 니 다.이 함 수 는 true 항목 으로 구 성 된 배열 을 되 돌려 줍 니 다.

<div id="example">
 <div>
 <button @click='concat'>concat</button>
 <button @click='slice'>slice</button>
 <button @click='map'>map</button>
 <button @click='filter'>filter</button>
 </div>
 <ul>
 <li v-for="item in items" >
  {{ item }}
 </li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 addValue:'match'
 },
 methods:{
 concat(){
  this.items = this.items.concat(this.addValue)
 },
 slice(){
  this.items = this.items.slice(1)
 },
 map(){
  this.items = this.items.map(function(item,index,arr){
  return index + item; 
  })
 },
 filter(){
  this.items = this.items.filter(function(item,index,arr){
  return (index > 0); 
  })
 }
 }
})
</script>

위 작업 으로 인해 Vue 가 기 존 DOM 을 버 리 고 전체 목록 을 다시 렌 더 링 하지 않 습 니 다.Vue 는 일부 스마트 계발 식 방법 을 실현 하여 DOM 요소 의 재 활용 을 극 대화 시 켰 기 때문에 같은 요 소 를 가 진 배열 로 원래 의 배열 을 교체 하 는 것 은 매우 효율 적 인 작업 이다.
검색 불가
JS 의 제한 으로 인해 Vue 는 다음 과 같은 변 동 된 배열 을 감지 할 수 없습니다.
1.색인 을 이용 하여 항목 을 직접 설정 할 때,예 를 들 어 vm.items[indexOfItem]=newValue
2.배열 의 길 이 를 수정 할 때,예 를 들 어 vm.items.length=newLength

<div id="example">
 <div>
 <button @click='setVal'>setVal</button>
 <button @click='setLength'>setLength</button>
 <button @click='pop'>pop</button>
 </div>
 <ul>
 <li v-for="item in items" >{{ item }}</li>
 </ul> 
 <p>{{ message }}</p> 
</div>

<script>
var watchFunc = function(){
 example.message = '      ';
 setTimeout(function(){
 example.message = '';
 },500); 
}
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 message:'',
 },
 watch:{
 items:watchFunc
 },
 methods:{
 pop(){
  this.items.pop()
 },
 setVal(){
  this.items[0]= 'match';
 },
 setLength(){
  this.items.length = 2;
 }
 }
})
</script>

이상 코드 에 서 는 값 과 길 이 를 직접 설정 하여 watch 를 사용 하면 변 화 를 감지 할 수 없습니다.
다음 두 가지 방식 모두vm.items[indexOfItem]=newValue와 같은 효 과 를 실현 할 수 있 으 며,동시에 트리거 상태 업데이트 도 가능 합 니 다.

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

 두 번 째 문 제 를 해결 하기 위해 서 는 splice 를 사용 할 수 있 습 니 다.

example1.items.splice(newLength)

<div id="example">
 <div>
 <button @click='setVal1'>setVal1</button>
 <button @click='setVal2'>setVal2</button>
 <button @click='setLength'>setLength</button>
 </div>
 <ul>
 <li v-for="item in items" >{{ item }}</li>
 </ul> 
 <p>{{ message }}</p> 
</div>

<script>
var watchFunc = function(){
 example.message = '      ';
 setTimeout(function(){
 example.message = '';
 },500); 
}
var example = new Vue({
 el: '#example',
 data: {
 items: ['Foo','Bar','Baz'],
 message:'',
 },
 watch:{
 items:watchFunc
 },
 methods:{
 setVal1(){
  Vue.set(this.items, 0, 'match')
 },
 setVal2(){
  this.items.splice(1, 1, 'xiaohuochai')
 }, 
 setLength(){
  this.items.splice(2)
 }
 }
})
</script>

필터 정렬
원본 데 이 터 를 실제 변경 하거나 초기 화하 지 않 고 배열 의 필터 나 정렬 복사 본 을 표시 해 야 할 때 도 있 습 니 다.이 경우 필터 나 정렬 배열 을 되 돌려 주 는 계산 속성 을 만 들 수 있 습 니 다.
【computed】

<div id="example">
 <ul>
 <li v-for="n in evenNumbers">{{ n }}</li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 numbers: [ 1, 2, 3, 4, 5 ],
 },
 computed: {
 evenNumbers: function () {
  return this.numbers.filter(function (number) {
  return number % 2 === 0
  })
 }
 }
})
</script>

【methods】
계산 속성 이 적용 되 지 않 는 경우(예 를 들 어 내장 v-for 순환 중)method 방법 을 사용 할 수 있 습 니 다.

<div id="example">
 <ul>
 <li v-for="n in even(numbers)">{{ n }}</li>
 </ul> 
</div>

<script>
var example = new Vue({
 el: '#example',
 data: {
 numbers: [ 1, 2, 3, 4, 5 ],
 },
 methods: {
 even: function (numbers) {
  return numbers.filter(function (number) {
  return number % 2 === 0
  })
 }
 }
})
</script>

총결산
위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue 배열 업데이트 및 정렬 필터 기능 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!