method 안 좋아요?컴퓨터와method의 차이를 조사했다

개시하다
이 보도는 정말이다.js2를 사용하고 있습니다.
첫 학자인 만큼 미흡한 부분이나 착오가 있다면 교수님 잘 부탁드립니다.
Vue.js를 공부할 때coumputed Probati가 나왔어요. 이method probati가 좋지 않아요?그래서 차이점이 뭔지 알아봤어요.
결론
의존 관계 기반 캐시
묘사가 바뀔 때마다methodprobati를 실행합니다
동작 확인
말은 그렇지만 글만 있으면 어려워요. 계속 보세요.
프로그램 사양
comumputed probati와method probati의 행동을 확인합니다.
• number 는 3 이하일 때 "3 이하"를 나타낸다
• number 는 3 이상일 때 "3 위"를 나타낸다
index.html

<!-- Vue.jsのインストール -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ number }}</p>
  <button @click="number += 1">+1</button>

<!-- coumputed -->
  <p>coumputedプロパティ->{{ Coumputed }}</p>
<!-- method -->
  <p>methodプロパティ->{{ Method() }}</p>
</div>

new Vue({
 el: "#app",
   data: {
     number: 0,
     },
   //coumputedプロパティ
   computed: {
     Coumputed: function() {
       return this.number > 3 ? "3より上" : "３以下"
     }
   },
   //methodsプロパティ
   methods: {
     Method: function() {
       return this.number > 3 ? "3より上" : "３以下"
     }
   }
})

결실
결과는 같은 행위다.
method 속성도coumputed 속성과 같습니다.

소스 추가
함수가 언제 실행되는지 확인합니다.
<첨부 지점>
・index.>에서 ohternumber 추가
・console.log 추가
index.html

<!-- Vue.jsのインストール -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{ number }}</p>
  <button @click="number += 1">+1</button>
　<!-- 追加 -->
　<p>{{ othernumber }}</p>
  <button @click="othernumber += 1">+1</button>

<!-- coumputed -->
  <p>coumputedプロパティ->{{ Coumputed }}</p>
<!-- method -->
  <p>methodプロパティ->{{ Method() }}</p>
</div>

new Vue({
 el: "#app",
   data: {
     number: 0,
     //追記
     othernumber: 0,
     },
   //coumputedプロパティ
   computed: {
     Coumputed: function() {
       //追記
       console.log("Computed");
       return this.number > 3 ? "3より上" : "３以下"
     }
   },
   //methodsプロパティ
   methods: {
     Method: function() {
       //追記　　
       console.log("Methods");
       return this.number > 3 ? "3より上" : "３以下"
     }
   }
})

결실
coumputed Probati는 의존 관계 캐시를 기반으로 하는데method Probati는 관계에 의존하지 않는 상황에서 변화가 발생할 때 실행된다.
number 를 누를 때

전공이든 method전공이든 그 행동을 확인할 수 있다.
othernumber를 눌렀을 때

method 속성을 실행했습니다. 의존 관계가 없는 상황에서도 묘사가 변할 때 실행됩니다.
최후
프로 레슬링
실례를 가지고 참고하고자 하는 경우에 사용
프로 야구팀
클릭할 때, 마우스 스냅 등 어떤 동작이 발생할 때 처리하는 것이 좋다.
참고 문장
https://dev83.com/vue-computed-methods/