Vue.js 계산된 속성을 강제로 다시 계산하시겠습니까?

Vue.js 계산된 속성을 강제로 다시 계산하시겠습니까?

다음은 구성 요소의 계산 속성:

methods: {
  addFavoritePlace(place_id) {
    axios.post('/api/add-favorite-place', { place_id: place_id })
      .then(response => {
        // I need here force command.
      });
  },
},

computed: {
  filteredPlaces: function () {
    var is_open;

    if (this.showOpened) {
      is_open = 'open'
    } else {
      is_open = 'close'
    }

    return this.singlePlaces.filter((j) => {
        return j.name.toLowerCase().match(this.search.toLowerCase();
    });
  }
}

그리고 나의 마크업:

<span @click="addFavoritePlace(place.id)" class="favorite-btn active" v-if="place.is_favorited == true">
  <i class="icon-heart"></i>
</span>

<span @click="addFavoritePlace(place.id)" class="favorite-btn" v-else>
  <i class="icon-heart"></i>
</span>

계산된 내부의 필터링 기능을 다시 불러야 해.즐겨찾기 단추를 활성화하려면 다음과 같이 하십시오.

계산된 값을 강제로 업데이트할 필요는 없다.필요한 값이 변경되면 계산된 속성은 항상 자동으로 다시 계산된다.

그러니, 네 경우엔, 넌 변화를 줘야 해.singlePlaces그리고filteredPlaces자동으로 업데이트된다.

문서(https://vuejs.org/v2/guide/reactivity.html#For-Arrays))에서 보는 바와 같이 Array 및 Object reactivity에 대해 유의할 점이 있다.

예를 들어 즐겨찾는 장소를 추가할 때 코드를 포함하지 않았지만 다음과 같은 작업을 수행해야 할 수 있다.

Vue.set(this.singlePlaces, indexOfItem, updatedItem)

계산된 속성을 강제로 업데이트하고 값을 다시 계산하려면 데이터 속성을 사용하고 해당 속성을 계산된 함수(사용할 필요 없이 존재하는 것만으로도 충분함)에 언급한 다음 해당 데이터 속성을 변경하면 된다.이렇게 하면 계산된 값이 강제로 업데이트된다.

암호는 다음과 같다.

data() {
  return {
    refreshKey: false,
    // ...
  }
},
computed: {
  myComputedValue() {
    // just mentioning refreshKey
    this.refreshKey;

    // rest of the function that actualy do the calculations and returns a value
  },
},
methods: {
  myMethod() {
    // the next line would force myComputedValue to update
    this.refreshKey = !this.refreshKey;

    // the rest of my method
  },
},

무엇보다도, 당신은 당신의 마크업 대신에 단지 클래스를 전환하는 것만으로 2배 적은 이벤트 처리, 2배 적은 DOM 노드 생성, 2배 적은 재평가 및 재구성을 저장할 수 있다.또한 @click 이벤트 내에서 함수를 호출하는 것이 이 함수를 즉시 실행하지 않고 혹시나 해서 익명 함수로 포장할 수 있을지 잘 모르겠다.또한, 다음이것을 주목하라.place.id나는 통째로 지나가고 있다.place에 대한 객관적 언급.addFavoritePlace:

<span
    @click="() => addFavoritePlace(place)"
    class="favorite-btn"
    :class="{active: place.is_favorited}">
        <i class="icon-heart"></i>
</span>

둘째로, 일부분filteredPlaces코드는 다른 곳에서 사용되지 않거나 반환되는 변수를 설정하기 때문에 의미가 없으므로, 어쨌든 쓰레기 수집기는 즉시 그것을 죽일 것이다.대신 다음과 같이 하십시오.

computed: {
  filteredPlaces () {
    const search = this.search.toLowerCase()
    return this.singlePlaces.filter((p) => {
        return p.name.toLowerCase().includes(search)
    });
  }
}

그리고 마침내, 당신은 단지 업데이트 할 수 있다.singlePlaces항목 및 항목은 자동으로 필터링된장소에 영향을 미치며, 모든 항목에 is_favored 속성이 없는 경우 특별한 작업을 수행할 필요가 없음place넌 할 수 있다.mapVue가 업데이트를 추적하도록 강제하거나 init on init 또는 강제 실행set방법의또한, 내가 말했듯이, 나는 통째로 통과할 것이다.place대신에 참조.id스택에서 이 요소를 다시 찾을 필요가 없도록:

methods: {
  async addFavoritePlace (place) {
    await axios.post('/api/add-favorite-place', { place_id: place.id })
    this.$set(place, 'is_favorited', true)
  },
},

참조URL: https://stackoverflow.com/questions/48700142/vue-js-force-computed-properties-to-recompute