Vue가 HTML 코드의 모든 메서드를 다시 실행하지 않도록 중지

Vue가 중괄호 사이 또는

v-bind

또는

v-Html

또는 화면에서 무언가가 변경된 경우 이벤트 바인딩되지 않은 메서드를 사용합니까?

아니? 아래 실행 예를 참조하십시오.

Vue는 화면에 어떤 것이든 변경되면 메서드(비결합)를 다시 실행하는 것이 사실이며, 이것이 바로 반응형 프레임워크라고 불리는 이유입니다. 그러나 수백 가지 방법이 있고 화면에서 무언가를 변경하고 Vue가 수백 가지 방법을 실행하기 시작한다고 가정하면 앱의 성능을 상상해보십시오.

이 예를 보자:

<template>
  <div id="app">
    <Div>
      <span>Counter :{{ counter }}</span> <br />
      <button @click='counter++'>Increase</button> </t>
      <button @click='counter--'>Decrease</button>
    </Div>
    <p>{{ currentTime() }}</p>
  </div>
</template>

<script>
import VueExample from './components/HelloWorld.vue';

export default {
  data() {
        return {
            counter: 0,
        };
    },
  methods: {
    currentTime() {
      var date = new Date();
      console.log("in another method")
      return date;
    },
  },
};
</script>

이 예제에서는 클릭 시 카운터를 증가 및 감소시키는 두 개의 버튼이 있으며 현재 시간을 표시하는 this 코드도 있습니다.
{{ <p>{{ currentTime() }}</p>}}
버튼 중 하나를 클릭하면 콘솔 로그를 보거나 UI에서 현재 시간을 확인하여 확인할 수 있는 currentTime() 메서드를 실행합니다. counter는 currentTime() 메서드와 아무 관련이 없지만 여전히 카운터를 늘리거나 줄일 때마다 실행됩니다.

왜요?

그 이유는 Vue가 counter 속성이 currentTime() 메서드의 일부인지 여부를 알지 못하기 때문입니다. 즉, Vue가 currentTime()가 counter 속성 여부에 관계없이 매번 실행합니다.



Check the running example here

그럼, 어떻게 멈출까요?

이 문제에 대한 해결책은 "계산된 속성"입니다.

계산된 속성은 Vue의 다른 속성과 유사하지만 계산된 속성에서 Vue는 종속성을 인식하고 종속성이 변경될 때만 실행합니다.

따라서 위의 코드를 수정해 보겠습니다.

이를 위해 메서드 섹션에서
currentTime()
섹션으로 computed를 이동하기만 하면 됩니다.

  <div id="app">
    <Div>
      <span>Counter :{{ counter }}</span> <br />
      <button @click='counter++'>Increase</button> </t>
      <button @click='counter--'>Decrease</button>
    </Div>
    <p>{{ currentTime }}</p>
  </div>
</template>

<script>
import VueExample from './components/HelloWorld.vue';

export default {
  data() {
        return {
            counter: 0,
        };
    },
  computed:{
    currentTime() {
      var date = new Date();
      console.log("in another method")
      return date;
    },
  },
  methods: {
  },
};
</script>

Watcher를 사용하여 이 문제를 해결하는 또 다른 접근 방식이 있습니다. "다음 기사에서 논의하겠습니다.