개요

원본 코드 댓글에 "어, 이거 좋아요?"이렇게 생각하는 코드.실제 원본 코드를 붙일 수 없기 때문에 다음은 인상이다.대체로 처리는 같다.출처는 Vue입니다.js + TypeScript .

@Component
export default class Computed extends Vue {
  // dataに配列を持つ
  listOdd: number[]  = [];
  listEven: number[] = [];

  /**
   * クリック時に配列の更新を行う
   * forでループして、iの値によって別のlistにpushする
   */
  onClick() {
    for (let i = 0; i < 100; i++) {
      if (i % 2 === 1) {
        this.listOdd.push(i);
      } else {
        this.listEven.push(i);
      }
    }
  }

  // それぞれ配列の算出プロパティ
  get backOdd() {
    return this.listOdd[this.listOdd.length - 1];
  }
  get backEven() {
    return this.listEven[this.listEven.length - 1];
  }
}

의문의 일

어?소스인 줄 알았던 여기.

for (let i = 0; i < 100; i++) {
  if (i % 2 === 1) {
    this.listOdd.push(i);
  } else {
    this.listEven.push(i);
  }
}

매번push 속성.매번 순환할 때마다 데이터를 업데이트합니다.

속성이 흰색으로 업데이트되었는지 계산합니다

반복할 때마다 렌더링이 발생합니다

이렇게 생각하다.특히 최근의 자바스크립트 기법을 사용하면 목록 처리가 for를 사용하지 않아도 이루어지기 때문에 for에 쓴 처리가 조화롭지 못한 것도 사실이다.

문제가 있는지 확인해 보세요.

콘솔에 가입하여computed,updated가 언제 불리는지 확인하였습니다.

onClick() {
  for (let i = 0; i < 100; i++) {
    console.error("loop"); // console
    if (i % 2 === 1) {
      this.listOdd.push(i);
    } else {
      this.listEven.push(i);
    }
  }
}

updated() {
  console.warn("updated"); // console
}

get backOdd() {
  console.warn("backOdd"); // console
  return this.listOdd[this.listOdd.length - 1];
}
get backEven() {
  console.warn("backEven"); // console
  return this.listEven[this.listEven.length - 1];
}

결과➡️ 문제없다

순환이 끝난 후,computed와 updated가 모두 실행되었습니다.이벤트가 끝날 때까지 계속 업데이트를 기다리고 있는 것 같습니다.원본 코드 평론의 불안은 기우로 끝났다.