메서드에서 메서드를 하나만 호출합니다.

메서드에서 메서드를 하나만 호출합니다.

이 예에서는 "를 변경합니다.name" 메서드를 통해 다음과 같이 입력합니다.

new Vue({
  el: '#exercise',
  data: {
    name: 'Petr',
  },
  methods: {
    random: function() {
      return Math.random();
    },
    changeName: function(event) {
      this.name = event.target.value;
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="exercise">
  <p>VueJS is pretty cool - {{ name }}</p>
  <p>{{ random() }}</p>
  <div>
    <input v-on:input="changeName" type="text">
  </div>
</div>

하지만 매번 메서드를 호출할 때마다changeName다른 방법(random)도 호출됩니다.

왜요?

계산 속성 - 계산 캐싱 vs 메서드:

이에 비해 메서드 호출은 재렌더가 발생할 때마다 항상 함수를 실행합니다.

리렌더는 언제 발생하나요?데이터가 변경되었을 때.

그리고 예제 데이터(예:name)는 에 입력할 때마다 변경됩니다.<input>(이것이 콜을 하기 때문에)changeName).

라이프 사이클 다이어그램을 확인합니다.구체적으로는 "장착된" 빨간색 볼:

아래 데모를 체크하면 라이프 사이클 이벤트가 발생하고 있음을 알 수 있습니다(그 결과 이들 사이에 재렌더링).

new Vue({
  el: '#exercise',
  data: {
    name: 'Petr',
  },
  beforeUpdate() {
    console.log('beforeUpdate executed');
  },
  updated() {
    console.log('updated executed');
  },
  methods: {
    random: function() {
      return Math.random();
    },
    changeName: function(event) {
      this.name = event.target.value;
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<div id="exercise">
  <p>VueJS is pretty cool - {{ name }}</p>
  <p>{{ random() }}</p>
  <div>
    <input v-on:input="changeName" type="text">
  </div>
</div>

@acdcjunior는 이 문제에 대해 매우 잘 설명했습니다.

이에 비해 메서드 호출은 재렌더가 발생할 때마다 항상 함수를 실행합니다.

하지만 정말로 원할 때 랜덤 메서드를 결합하고 싶다면 어떻게 해야 할까요?해결책은 다음과 같습니다.

수정된 HTML

<div id="exercise">
  <p>VueJS is pretty cool - {{ name }}</p>
  <p>{{ randomNumber }}</p>
  <div>
    <input v-on:input="changeName" type="text">
    <input type="button" @click="random" value="Generate Random Number">
  </div>
</div>

위의 예에서는 데이터를 사용하고 있습니다.randomNumber. 이 버튼을 추가했습니다.randommethod를 클릭하면 랜덤 번호가 생성됩니다.

// modified data option:
data: {
  name: 'Petr',
  randomNumber: '' /* initialize randomNumber */
},
// modified random method
methods: {
  random: function() {
    /* Now, we return data randomNumber */
    return this.randomNumber = Math.random();
  },
  changeName: function(event) {
    this.name = event.target.value;
  }
},
created() {
  // we need to show random number when instance is created
  this.random();
}

대체 여기서 무슨 일이 벌어지고 있는 거야?방법random호출하고 랜덤 번호도 생성해야겠죠?

아니요. 방법random이 메서드는 어디서도 사용하지 않았기 때문에 호출되지 않습니다.속박되어 있지 않다random()사용할 수 있습니다.

즉, 템플릿 내부에 후크된 메서드가 있는 경우에만 메서드가 호출됩니다(말한 대로 재렌더된 후).

언급URL : https://stackoverflow.com/questions/49130636/call-only-one-method-from-methods