Vue 에서 computed,methods 와 watch 의 차이 점 요약

머리말
Vue 를 배우 기 시작 한 사람들 에 게 방법,계산 속성 과 관찰자 간 의 차 이 는 약간 헷 갈 린 다.
비록 보통 그것들 중 하 나 를 사용 하여 많 든 적 든 똑 같은 일 을 완성 할 수 있 지만,모든 사람 이 어디에서 다른 사람 보다 나 은 지 아 는 것 이 중요 하 다.
이 빠 른 알림 에서 우 리 는 Vue 응용 프로그램의 이 세 가지 중요 한 부분 과 그 용례 를 이해 할 것 이다.우 리 는 이 세 가지 방법 중 하 나 를 사용 하여 같은 검색 구성 요 소 를 구축 함으로써 이 를 실현 할 것 이다.
Methods
한 방법 에서 많 든 적 든 당신 이 원 하 는-대상 속성의 함수 입 니 다.DOM 에서 발생 하 는 이벤트 에 반응 하거나 구성 요소 의 다른 위치 에서 호출 할 수 있 습 니 다.예 를 들 어 속성 이나 관찰자 에서 호출 할 수 있 습 니 다.방법 은 공공 기능 을 그룹 으로 나 누 는 데 사 용 됩 니 다.예 를 들 어 폼 제출 을 처리 하거나 Ajax 요청 을 보 내 는 등 재 활용 가능 한 기능 을 구축 합 니 다.
Vue 인 스 턴 스 의 methods 대상 에 만 드 는 방법:

new Vue({
 el: "#app",
 methods: {
 handleSubmit() {}
 }
})

템 플 릿 에서 사용 하고 싶 을 때 이렇게 할 수 있 습 니 다:

<div id="app">
 <button @click="handleSubmit">
 Submit
 </button>
</div>

v-on 명령 을 사용 하여 이벤트 처리 프로그램 을 dom 요소 에 추가 합 니 다.이 요 소 는@기호 로 줄 일 수 있 습 니 다.
현재 단 추 를 누 를 때마다 handle Submit 방법 을 사용 합 니 다.방법 체 에 필요 한 매개 변 수 를 전달 하 는 인 스 턴 스 는 다음 과 같은 작업 을 수행 할 수 있 습 니 다.

<div id="app">
 <button @click="handleSubmit(event)">
 Submit
 </button>
</div>

폼 이 제출 된 상태 에서 브 라 우 저의 기본 동작 을 막 을 수 있 도록 이벤트 대상 을 전달 합 니 다.
그러나 우리 가 하나의 명령 을 사용 하여 사건 을 추가 할 때 우 리 는 하나의 장식 부 를 사용 하여 똑 같은 일 을 더욱 우아 하 게 실현 할 수 있다.@click.stop=“handleSubmit”이제 배열 의 데이터 목록 을 걸 러 내 는 방법 에 대한 예 시 를 살 펴 보 겠 습 니 다.
In the demo, we want to render a list of data and a search box. The data rendered changes whenever a user enters a value in the search box. The template will look like this:
프 리 젠 테 이 션 에서 데이터 목록 과 검색 상 자 를 보 여 주 려 고 합 니 다.사용자 가 검색 상자 에 값 을 입력 할 때마다 보 여 주 는 데이터 가 변 경 됩 니 다.템 플 릿 은 다음 과 같 습 니 다.

<div id="app">
 <h2>Language Search</h2>

 <div class="form-group">
 <input
  type="text"
  v-model="input"
  @keyup="handleSearch"
  placeholder="Enter language"
  class="form-control"
 />
 </div>

 <ul v-for="(item, index) in languages" class="list-group">
 <li class="list-group-item" :key="item">{{ item }}</li>
 </ul>
</div>

보시 다시 피 저 희 는 handlesearch 방법 을 참조 합 니 다.사용자 가 검색 필드 에 내용 을 입력 할 때마다 이 방법 을 사용 합 니 다.만 드 는 방법 과 데이터 가 필요 합 니 다:

new Vue({
 el: '#app',
 data() {
 return {
  input: '',
  languages: []
 }
 },
 methods: {
 handleSearch() {
  this.languages = [
  'JavaScript',
  'Ruby',
  'Scala',
  'Python',
  'Java',
  'Kotlin',
  'Elixir'
  ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
 }
 },
 created() { this.handleSearch() }
})

handlesearch 방법 은 입력 필드 의 값 을 사용 하여 목록 의 항목 을 업데이트 합 니 다.주의해 야 할 것 은 methods 대상 에서 this.handlesearch 를 사용 하여 이 방법 을 인용 할 필요 가 없다 는 것 입 니 다(react 에서 해 야 할 것 처럼)
Computed Properties
위의 예제 에서 검색 은 예상 한 대로 작업 할 수 있 지만 더 우아 한 해결 방안 은 속성 을 계산 하 는 것 이다.계산 속성 은 기 존의 소스 에서 새로운 데 이 터 를 조합 하 는 데 매우 편리 하 다.방법 에 비해 그들의 큰 장점 은 캐 시 출력 이다.이 는 계산 속성 에 독립 된 일부 내용 이 페이지 에서 변경 되 고 UI 를 다시 나타 내 면 캐 시 결 과 를 되 돌려 주 고 계산 속성 을 다시 계산 하지 않 아 대가 가 높 은 조작 을 피 할 수 있다 는 뜻 이다.
계산 속성 은 우리 가 사용 할 수 있 는 데 이 터 를 사용 하여 즉시 계산 할 수 있 게 한다.이 예 에서 우 리 는 정렬 해 야 할 항목 배열 이 있 습 니 다.사용자 가 입력 필드 에 값 을 입력 할 때 정렬 하 기 를 원 합 니 다.
우리 의 템 플 릿 은 거의 앞의 교체 와 같 습 니 다.우리 가 v-for 명령 을 전달 하고 있 는 계산 속성(filered list)을 제외 하고:

<div id="app">
 <h2>Language Search</h2>

 <div class="form-group">
 <input
  type="text"
  v-model="input"
  placeholder="Enter language"
  class="form-control"
 />
 </div>

 <ul v-for="(item, index) in filteredList" class="list-group">
 <li class="list-group-item" :key="item">{{ item }}</li>
 </ul>
</div>

스 크 립 트 부분 이 약간 다 릅 니 다.우 리 는 데이터 속성 중의 언어(이전에 이것 은 빈 배열 이 었 다)를 설명 했다.우 리 는 논 리 를 계산 속성 으로 옮 겼 다.

new Vue({
 el: "#app",
 data() {
 return {
  input: '',
  languages: [
  "JavaScript",
  "Ruby",
  "Scala",
  "Python",
  "Java",
  "Kotlin",
  "Elixir"
  ]
 }
 },
 computed: {
 filteredList() {
  return this.languages.filter((item) => {
  return item.toLowerCase().includes(this.input.toLowerCase())
  })
 }
 }
})

filered List 계산 속성 은 입력 필드 값 을 포함 하 는 항목 배열 을 포함 합 니 다.첫 번 째 렌 더 링 시(입력 필드 가 비어 있 을 때)전체 배열 을 렌 더 링 합 니 다.사용자 가 필드 에 값 을 입력 할 때 filered List 는 필드 에 입력 한 값 을 포함 하 는 배열 을 되 돌려 줍 니 다.
속성 을 계산 할 때 계산 할 데 이 터 를 사용 해 야 합 니 다.그렇지 않 으 면 프로그램 에 오류 가 발생 할 수 있 습 니 다.
computed 속성 은 새로운 filered list 속성 을 만 들 었 습 니 다.이것 이 바로 우리 가 템 플 릿 에서 그것 을 참조 할 수 있 는 이유 입 니 다.이 동작 을 수행 할 때마다 filered list 의 값 이 변 경 됩 니 다.여기 서 쉽게 바 뀌 는 의존 항목 은 입력 값 입 니 다.
마지막 으로 계산 속성 은 템 플 릿 에 변 수 를 만 들 수 있 습 니 다.이 변 수 는 하나 이상 의 데이터 속성 으로 구 축 됩 니 다.일반적인 예 는 이러한 사용자 의 이름과 성씨 에서 전체 이름 을 만 드 는 것 입 니 다.

computed: {
 fullName() {
 return `${this.firstName} ${this.lastName}`
 }
}

템 플 릿 에서 전체 이름 을 실행 할 수 있 습 니 다.이름 이나 성씨 의 값 이 바 뀔 때마다 전체 이름 의 값 이 변 경 됩 니 다.
Watchers
Watchers 는 이미 발생 한 변경 사항(예 를 들 어 속성 이나 데이터 속성)에 응답 하고 자 하 는 경우 에 매우 유용 합 니 다.Vue 문서 에서 언급 한 바 와 같이 변화 하 는 데이터 에 응답 하기 위해 비동기 또는 비 싼 작업 을 수행 하려 면 가장 유용 합 니 다.
검색 예제 에서 우 리 는 방법 예제 로 돌아 가 데이터 속성 을 입력 하기 위해 관찰 프로그램 을 설정 할 수 있 습 니 다.그런 후에 우 리 는 입력 값 의 어떤 변화 에 도 반응 할 수 있다.
우선,언어 데이터 속성 을 사용 하기 위해 템 플 릿 을 복원 합 니 다.

<div id="app">
 <h2>Language Search</h2>

 <div class="form-group">
 <input
  type="text"
  v-model="input"
  placeholder="Enter language"
  class="form-control"
 />
 </div>

 <ul v-for="(item, index) in languages" class="list-group">
 <li class="list-group-item" :key="item">{{ item }}</li>
 </ul>
</div>

그리고 우리 의 Vue 인 스 턴 스 는 다음 과 같 습 니 다.

new Vue({
 el: "#app",
 data() {
 return {
  input: '',
  languages: []
 }
 },
 watch: {
 input: {
  handler() {
  this.languages = [
   'JavaScript',
   'Ruby',
   'Scala',
   'Python',
   'Java',
   'Kotlin',
   'Elixir'
  ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
  },
  immediate: true
 }
 }
})

여기 서 관찰 자 를 함수 가 아 닌 대상 으로 설정 합 니 다.이것 은 내 가 즉시 속성 을 지정 할 수 있 도록 관찰 프로그램 이 구성 요소 가 불 러 온 후에 즉시 실 행 될 것 입 니 다.목록 을 채 우 는 효과 가 있 습 니 다.그리고 실행 되 는 함 수 는 handler 속성 에 있 습 니 다.
요약:
그들 이 말 한 것 처럼 강력 한 힘 을 가지 고 책임 이 크다.Vue 는 위대 한 프로그램 을 구축 하 는 데 필요 한 슈퍼 능력 을 제공 합 니 다.언제 사용 하 느 냐 가 사용자 가 좋아 하 는 콘 텐 츠 를 구축 하 는 관건 이다.방법,계산 속성 과 관찰 자 는 당신 이 사용 할 수 있 는 슈퍼 능력 의 일부분 입 니 다.앞으로 가세 요.잘 이용 하 세 요!
원본 주소:https://www.sitepoint.com/the-difference-between-computed-properties-methods-and-watchers-in-vue/링크 설명 추가
자,이상 이 이 글 의 모든 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.