VUE 종 methods watch 와 compute 의 차이 점 과 관 계 를 이야기 합 니 다.

작용 메커니즘 과 성질 상 methods,watch 와 computed 의 관 계 를 보다
사진 제목[오리지널]:<그 세 사람 은 무슨 사이 일 까?>
 
우선 methods,watch,coptute d 는 함 수 를 바탕 으로 하지만 각각 다르다. 
그리고 역할 체제 와 성격 을 보면 methods 와 watch/coputed 가 다 르 기 때문에 제 다음 소 개 는 주로 두 가지 비교 가 있 습 니 다.
1.methods 와(watch/computed)의 대비
2.watch 와 computed 의 대비
작용 메커니즘 상
1.watch 와 coptute d 는 모두 Vue 의 의존 추적 체 제 를 바탕 으로 이런 일 을 처리 하려 고 한다.특정한 데이터(데이터 의존 이 라 고 함)가 변화 할 때 이 데이터 에 의존 하 는 모든'관련'데이터'자동'이 변화 하고 관련 함수 가 자동 으로 호출 되 어 데이터 의 변동 을 실현 하 는 것 이다.
2.methods:methods 에 함 수 를 정의 하 는 데 사 용 됩 니 다.수 동 으로 호출 해 야 실행 할 수 있 음 이 분명 합 니 다.watch 와 computed 처럼'자동 실행'이 미리 정 의 된 함수 가 아 닙 니 다.
 【총 결]:methods 에서 정 의 된 함 수 는 주동 적 으로 호출 되 어야 하 며,watch 와 coptute d 와 관련 된 함 수 는 자동 으로 호출 되 어 우리 가 원 하 는 역할 을 완성 합 니 다.
성질 상 으로 보다
1.methods 에서 정 의 된 것 은 함수 입 니 다."fuc()"처럼 호출 해 야 합 니 다.(함수 가 fuc 라 고 가정 합 니 다)
2.coptute d 는 계산 속성 으로 사실상 data 대상 의 데이터 속성 과 같은 종류(사용 상)입 니 다.
예 를 들 면:

computed:{
  fullName: function () { return this.firstName + lastName }
}

사용 할 때 this.fullName 으로 데 이 터 를 가 져 오 는 것 과 같 습 니 다.(함수 로 호출 하지 마 세 요!)
3.watch:감청 메커니즘+이벤트 메커니즘 과 유사 합 니 다.
예 를 들 면:

watch: {
  firstName: function (val) { this.fullName = val + this.lastName }
}

firstName 의 변 화 는 이 특수 한"이벤트"가 촉발 되 는 조건 이 며,firstName 에 대응 하 는 함 수 는 이벤트 가 발생 한 후 실행 되 는 방법 을 감청 하 는 것 과 같 습 니 다.
watch 와 computed 의 대비
이렇게 많아

우선 그들 은 모두 Vue 의 의존 추적 체 제 를 바탕 으로 하 는데 이들 의 공통점 은 모두 데이터 에 의존 하여 변화 가 발생 할 때 의존 하 는 데 이 터 는 미리 정 의 된 함수 에 따라'자동'의 변화 가 발생 하 기 를 바 라 는 것 이다.
우 리 는 당연히 스스로 코드 를 써 서 이 모든 것 을 완성 할 수 있 지만,쓰기 가 혼 란 스 럽 고 코드 가 불필요 한 상황 을 초래 할 수 있다.Vue 는 우리 에 게 이러한 편리 한 인 터 페 이 스 를 제공 하고 규칙 을 통일 시 켰 다.
그러나 watch 와 computed 도 뚜렷하게 다른 점 이 있다.
watch 와 coptute d 가 각각 처리 하 는 데이터 관계 장면 이 다 릅 니 다.
1.watch 가 잘 처리 하 는 장면:한 데이터 가 여러 데이터 에 영향 을 미친다.
2.coptute 가 잘 처리 하 는 장면:한 데이터 가 여러 데이터 의 영향 을 받는다.
watch 가 잘 처리 하 는 장면:한 데이터 가 여러 데이터 에 영향 을 줍 니 다.
 
(구체 적 으로 위의 그림 을 보면 ok,여 기 는 더 이상 군말 하지 않 겠 습 니 다)
watch 에 대해 서 는 한 장면 부터 말씀 드 리 겠 습 니 다.
'해적 왕'에서 주인공 팀 의 이름 은'밀짚모자 해적 단'이다.
그래서 우 리 는 선원 들 을 순서대로 불 렀 다.
밀짚모자 해적 단 솔 론,밀짚모자 해적 단 나 미 를 유추 해 보면...
우 리 는 선단 의 명칭 이 변경 되 었 을 때 이 배의 모든 선원 의 이름 이 함께 변경 되 기 를 바 랍 니 다!!
예 를 들 면:
어느 날 선장 루피 는 팀 건설 을 강화 하고 해적 문 화 를 선양 하기 위해'밀짚모자 해적 단'을'고무 해적 단'(루피 는 고무 악마의 열매 능력 자)으로 개명 하기 로 했다.
저희 코드 는 다음 과 같 습 니 다. 

var vm = new Vue({
 el: '#app',
 /*
  data      ：
  1.haiZeiTuan_Name -->      
  2.      =      （     ） +     （    ）
 
             ：
  （  ）       -->     --> （1 )       
         --->         
 */
 data: {
  haiZeiTuan_Name: '     ',
  suoLong: '       ',
  naMei: '       ',
  xiangJiShi: '        '
 },
 /*
   watch ，  haiZeiTuan_Name（     ）    
  data                （suoLong，naMei，xiangJiShi）
          
 */
 watch: {
  haiZeiTuan_Name: function (newName) {
   this.suoLong = newName + '  '
   this.naMei = newName + '  '
   this.xiangJiShi = newName + '   '
   console.log(this.suoLong)
   console.log(this.naMei)
   console.log(this.xiangJiShi)
  }
 }
})
 
//   watch         
vm.haiZeiTuan_Name = '     '

demo:

그래서 선원 들 의 칭호 접 두 사 는 모두 통일 적 으로 수정 되 었 다!("밀짚모자 해적 단"이 었 는데)
하지만 우리 길 비 선장 은 내 가 고 기 를 이렇게 좋아 하 는데 차라리'고기 해적 단'이 라 고 불 러 야 겠 다 는 생각 이 들 었 다.
우 리 는 맨 아래 의 코드 를 다음 과 같이 바 꾸 었 다.

//   watch         
vm.haiZeiTuan_Name = '     '

demo:
 
컴퓨터 가 잘 처리 하 는 장면:한 데이터 가 여러 데이터 의 영향 을 받는다.
 
우리 한 장면 부터 얘 기 하 자.
로 비의 전체 이름 은 몽 키-D-로 비 였 다.그 는 해적 왕 이 되 고 싶 었 지만 로 비의 할아버지 카 프(해군 영웅)는 화가 나 서'로 비'를'해군 왕'으로 바 꾸 었 다.그 가 뜻 을 바 꾸 기 를 바 랐 다.
코드 는 다음 과 같 습 니 다:

var vm = new Vue({
 el: '#app',
 /*
  data      ：firstName，secName,thirdName
  computed     ：lufei_Name
      ： lufei_Name = firstName + secName + thirdName
                ，       lufei_Name
 */
 data: {
  //      ：  ・D・  
  firstName: '  ',
  secName: 'D',
  thirdName: '  '
 },
 computed: {
  luFei_Name: function () {
   return this.firstName + this.secName + this.thirdName
  }
 }
})
 
//  “  ”  “   ”
vm.thirdName = '   '
//        
console.log(vm.luFei_Name)

demo:
 
 하지만:
어느 날,루피 의 놀 리 는 할아버지 카 프 는 실수 로 족 보 를 잘못 알 았 을 수도 있다 는 것 을 알 게 되 었 다.실제로 그들 은'D'의 일족 이 아니 라'H'족 이 었 다.즉,'몽 키-D-루피'를'몽 키-H-루피'라 고 부 를 수도 있다.
마지막 코드 를 다음 과 같이 변경 합 니 다.

//  “D”  “H”
vm.secName = 'H'
//        
console.log(vm.luFei_Name)

demo：
 
methods 는 데이터 논리 관 계 를 처리 하지 않 고 호출 가능 한 함수 만 제공 합 니 다.
watch/computed 에 비해 methods 는 데이터 논리 관 계 를 처리 하지 않 고 호출 가능 한 함수 만 제공 합 니 다. 

new Vue({
 el: '#app',
 template: '<div id="app"><p>{{ say() }}</p></div>',
 methods: {
  say: function () {
   return '       '
  }
 }
})

기능 의 상호 보완 적 인 측면 에서 methods,watch 와 computed 의 관 계 를 보다.
   
coptute d 는 watch 와 methods 를 사용 할 때 처리 할 수 없 거나 적절 하지 않 은 상황 을 처리 하 는 경우 가 많 습 니 다.
computed 처리 methods 에 존재 하 는 중복 계산 상황 을 이용 합 니 다.

1.methods 안의 함 수 는 바로'강직 한 소년'입 니 다.다른 부모 함수 가 호출 되면 매번'순 순 히'실행 하고 결 과 를 되 돌려 줍 니 다.설령 이 결과 가 같 을 수 있 더 라 도 필요 하지 않 습 니 다.
2.computed 는'심기 Boy'로 Vue 가 제공 하 는 의존 추적 시스템 을 바탕 으로 데이터 에 의존 하여 변화 가 없 으 면 computed 는 다시 계산 하지 않 습 니 다.
예: 

new Vue({
 el: '#app',
 //     button，      getMethodsDate,getComputedDate  
 template: '<div id="app"><button @click="getMethodsDate">methods</button><button @click="getComputedDate">computed</button></div>',
 methods: {
  getMethodsDate: function () {
   alert(new Date())
  },
  //   computed          ――computedDate
  getComputedDate: function () {
   alert(this.computedDate)
  }
 },
 computed: {
  computedDate: function () {
   return new Date()
  }
 }

 methods 버튼 을 처음 클릭:
 
두 번 째 methods 버튼 클릭:

methods 를 두 번 클릭 하면 돌아 오 는 시간 이 다 릅 니 다!!
 처음으로 computed 단 추 를 눌 렀 습 니 다:
 
두 번 째 컴퓨터 버튼 클릭:
 
 컴퓨터 를 두 번 클릭 하고 돌아 오 는 시간 이 같 음 을 주의 하 세 요!!
1.methods 를 두 번 클릭 하면 돌아 오 는 시간 이 다 릅 니 다.
2.컴퓨터 를 두 번 누 르 면 돌아 오 는 시간 이 같 음 을 주의 하 세 요.
 【주의]왜 컴퓨터 를 두 번 눌 러 서 돌아 오 는 시간 이 같 지?new Date()는 의존 형 데이터(data 등 대상 에 놓 인 인 인 스 턴 스 데이터 가 아 닌)가 아니 기 때문에 coptute d 는 캐 시 값 만 제공 하고 다시 계산 하지 않 습 니 다.
 1.의존 형 데이터 가 존재 합 니 다.2.의존 형 데이터 가 이 두 가지 조건 을 바 꿔 야 coptute d 가 다시 계산 할 수 있 습 니 다. 
methods 의 데 이 터 는 매번 계산 합 니 다. 
coptute d 를 이용 하여 watch 가 특정 상황 에서 코드 가 불필요 한 현상 을 처리 하고 코드 를 간소화 합 니 다.
 

new Vue({
 el: '#app',
 data: {
  fullName: '   ',
  firstName: ' ',
  secName: ' ',
  thirdName: ' '
 },
 // watch          ，   ，     ，    
 watch: {
  firstName: function (newValue) {
   this.fullName = newValue + this.secName + this.thirdName
   console.log(this.fullName)
  },
  secName: function (newValue) {
   this.fullName = this.firstName + newValue + this.thirdName
   console.log(this.fullName)
  },
  thirdName: function (newValue) {
   this.fullName = this.firstName + this.secName + newValue
   console.log(this.fullName)
  }
 }
})

watch 의 코드 는 분명히 같은 유형 이 고 중복 되 며 간결 하지 도 않 고 우아 하지 도 않 기 때문에 우 리 는 그것 을 이렇게 만 들 수 있다.

new Vue({
 el: '#app',
 data: {
  fullName: '   ',
  firstName: ' ',
  secName: ' ',
  thirdName: ' '
 },
 //  watch        ，      
 computed: function () {
  this.fullName = this.firstName + this.secName + this.thirdName
  console.log(this.fullName)
 }
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.