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/링크 설명 추가
자,이상 이 이 글 의 모든 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가 치 를 가지 기 를 바 랍 니 다.여러분 의 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue 부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 동기화하기텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.