vue(2.x) 응답식 수정 데이터(대상, 수조) 및 난점(갱)

배경.
1. Vue는 객체 속성의 추가, 삭제를 감지할 수 없습니다(단, 객체에 직접 값을 재지정하거나 객체 또는 내부 객체의 속성을 수정할 수 있습니다).
2. Vue는 그룹의 항목 수정을 감지할 수 없음 (index에 따라),length 수정 (단지 이것일 뿐, 필터,map,concat,slice 등 방식으로 새로운 그룹의 값을 직접 부여할 수 있음)

대상
1. $set、set、$delete、delete

// $set Vue.set   
this.$set(this.obj, k, v)
Vue.set(this.obj, k, v)

this.$delete(this.obj, k)
Vue.delete(this.obj, k)

2. assign

배열
1. $set、set、$delete、delete
대상의 첫 번째 방식과 마찬가지로 대상을 수조로 바꾸고 키 (k) 를 아래 첨자 (index) 로 바꿉니다.
2. 배열 작업 함수 사용(사실 Vue에서 수정됨)
splice(),
push(), pop(),
shift(), unshift(),
sort(), reverse()

난점(구덩이):
1. vue 실례나 vue 구성 요소(this,this.$data)에 정의되지 않은 속성을 추가할 수 없습니다
2. 대상, 그룹을 set할 때value는 복잡한 데이터 구조로 할 수 있고vue는 귀속을 진행하여 이를 모두reactive의 데이터로 전환할 수 있다. 예를 들어 다음과 같다.

this.$set(this.texts, 0, [
  [1,2],
  [3,4],
  {name: 'XiaoMing'}
])

3. v-model에 귀속된 데이터는 LHS가 필요하지만 RHS(item 및 &, |, =, (,), 쌍안 등 연산자를 RHS로 되돌려줄 수 없다. 예를 들어 다음과 같다.

// texts: [1,2,3]

//   , item RHS


//   


//   


//   



//

4. 컴퓨터는 데이터에 있는 데이터(또는 대상의 속성, 그룹의 항목)를 귀속시켜야 한다. 그렇지 않으면 응답식 업데이트를 할 수 없다. 특히 귀속초기에 존재하지 않았던 데이터를 귀속할 때 다음과 같이 주의해야 한다.

computed: {

    //   
    prop () {
      if(!this.obj.data) return {}
      return this.obj.data
    }

    //   ，  Vue.set Object.assign  
    prop () {
      if(!this.obj.data) this.$set(this.obj, data, {}})
      return this.obj.data
    }

    //   
    prop () {
      if(!this.obj.arr) return []
      return this.obj.arr
    }

    //   
    prop () {
      if(!this.obj.arr) this.$set(this.obj, arr, []})
      return this.obj.arr
    }
}

구독, 좋아요를 환영합니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

VUE 기반 장치가 PC인지 모바일 포트인지 판단

실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

vue(2.x) 응답식 수정 데이터(대상, 수조) 및 난점(갱)

좋은 웹페이지 즐겨찾기