Vue 2.0 학습 노트 Vue 의 computed 속성
10949 단어 Vuecomputed 속성
<div id="app">
<h1>{{ message.split('').reverse().join('') }}</h1>
</div>이것 이 바로 어떤 복잡 한 논리 에 대해 서도 속성 을 계산 해 야 하 는 원인 이다.다음은 Vue 의 계산 속성 을 배 워 보 겠 습 니 다.
속성 을 계산 하면 보기(View)에 표 시 된 속성 을 빠르게 계산 할 수 있 습 니 다.이 계산 들 은 캐 시 되 고 필요 할 때 만 업 데 이 트 됩 니 다.
Vue 에 서 는 보기 의 값 을 설정 하 는 여러 가지 방법 이 있 습 니 다.
계산 속성
계산 속성 은 우리 가 지정 한 보기,복잡 한 값 을 계산 할 수 있 도록 합 니 다.이 값 들 은 의존 항목 값 에 연결 되 어 필요 할 때 만 업 데 이 트 됩 니 다.
예 를 들 어 우 리 는 데이터 모델 에 results 배열 이 있 을 수 있 습 니 다.
data () {
return {
results: [
{
name: 'English',
marks: 70
},
{
name: 'Math',
marks: 80
},
{
name: 'History',
marks: 90
}
]
}
}
computed: {
totalMarks: function () {
let total = 0
let me = this
for (let i = 0; i < me.results.length; i++) {
total += parseInt(me.results[i].marks)
}
return total
}
}
그리고 우 리 는 보기에 서 계산 값 을 표시 할 수 있 습 니 다.
<div id="app">
<div v-for="subject in results">
<input v-model="subject.marks">
<span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
</div>
<div>
Total marks are: {{ totalMarks }}
</div>
</div>
속성 계산 vs 방법
우 리 는 Vue 중의 method 를 사용 하여 학과 의 총 점 을 계산 할 수 있 고 최종 적 으로 얻 은 총 결 과 는 같다.
상례 를 토대 로,우 리 는 컴퓨터 블록 중의 totalMarks 함 수 를 전체적으로 methods 로 옮 겼 다.동시에 템 플 릿 에서{{totalMarks}}을{{totalMarks()}로 바 꿉 니 다.당신 이 최종 적 으로 본 결 과 는 똑 같 습 니 다.다음 과 같 습 니 다.
let app = new Vue({
el: '#app',
data () {
return {
results: [
{
name: ' ',
marks: 70
},
{
name: ' ',
marks: 80
},
{
name: ' ',
marks: 90
}
]
}
},
methods: {
totalMarks: function () {
let total = 0
let me = this
for (let i = 0; i < me.results.length; i++) {
total += parseInt(me.results[i].marks)
}
return total
}
}
})만약 우리 가 계산 속성 이 있다 면,Vue 는 계 산 된 속성 이 의존 하 는 값 을 기억 할 것 입 니 다(이 예제 에서 그것 은 results 입 니 다).이 를 통 해 Vue 는 변화 에 의존 할 때 만 값 을 계산 할 수 있다.그렇지 않 으 면 이전 캐 시 값 을 되 돌려 줍 니 다.이것 은 results 가 아직 변경 되 지 않 았 다 면 토 탈 마크 의 계산 속성 을 여러 번 방문 하면 이전의 계산 결 과 를 즉시 되 돌려 주 고 함 수 를 다시 실행 하지 않 아 도 된다 는 것 을 의미한다.
위의 두 예제 에서 도 Vue 에서 속성 을 계산 하 는 것 은 그들의 의존 을 바탕 으로 캐 시 를 하 는 것 이 고 방법 은 그들의 의존 을 바탕 으로 캐 시 를 하지 않 는 다 는 것 을 설명 한다.따라서 계산 속성 을 사용 하 는 것 이 방법 보다 성능 이 좋다.
이것 또한 아래 의 계산 속성 이 더 이상 업데이트 되 지 않 는 다 는 것 을 의미 합 니 다.Date.now()는 응답 식 의존 이 아니 기 때 문 입 니 다.
computed: {
now: function () {
return Date.now()
}
}그럼 우 리 는 왜 캐 시가 필요 합 니까?만약 에 우리 가 성능 비용 이 비교적 큰 계산 속성 A 가 있다 고 가정 하면 아주 큰 배열 을 옮 겨 다 니 고 대량의 계산 을 해 야 한다.그리고 우 리 는 다른 계산 속성 이 A 에 의존 할 수 있 습 니 다.캐 시 가 없 으 면 A 의 getter 를 여러 번 실행 할 수 밖 에 없습니다!캐 시 를 원 하지 않 는 다 면 방법 으로 대체 하 십시오.
속성 을 계산 하 는 setter
계산 속성 은 기본적으로 getter 만 있 지만 필요 할 때 setter 를 제공 할 수 있 습 니 다.
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
입력 상자 에 fullName 을 입력 하고 set 단 추 를 누 르 면 해당 하 는 효 과 를 볼 수 있 습 니 다.app.fullName="Airen liao"를 다시 실행 할 때 속성 을 계산 하 는 setter 가 호출 되 고 app.firstName 과 app.lastName 도 상응 하여 업 데 이 트 됩 니 다.다음 그림 에서 보 듯 이:
관찰자
계산 속성 은 대부분의 경우 에 적합 하지만 사용자 정의 watcher 가 필요 할 때 도 있 습 니 다.Vue 가 watch 옵션 을 통 해 데이터 의 변화 에 응답 하 는 더 일반적인 방법 을 제공 하 는 이유 입 니 다.데이터 변화 응답 을 할 때 비동기 작업 을 하거나 비용 이 많이 드 는 작업 을 수행 하 는 것 이 유용 합 니 다.
Vue 는 Vue 인 스 턴 스 의 데이터 변동 을 관찰 하고 응답 하 는 보다 일반적인 방식 을 제공 합 니 다:watch 속성.다른 데이터 에 따라 변동 해 야 할 데이터 가 있 을 때 워 치 를 남용 하기 쉽다.그러나 일반적으로 더 좋 은 생각 은 명령 식 워 치 리 셋 이 아 닌 속성 을 계산 하 는 것 이다.예 를 들 어 다음 예제:
<div id="app">
{{ fullName }}
</div>
let app = new Vue({
el: '#app',
data () {
return {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
let app = new Vue({
el: '#app',
data () {
return {
firstName: 'Foo',
lastName: 'Bar'
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
Vue 의 계산 속성 이 매우 좋 습 니 다.복잡 한 조작 이나 데이터 형식 을 실행 할 수 있 도록 해 주 며,항목 계산 에 의존 하 는 성능 을 최대한 수행 할 수 있 으 며,변경 에 의존 할 때 만 보 기 를 업데이트 할 수 있 습 니 다.안 타 깝 게 도 이들 은 완전히 동기 화 됐다.
다행히도 플러그 인 이 하나 있 습 니 다.vue-async-computed패 키 지 를 사용 하면 하나의 promise 값 을 구성 요소 속성 에 연결 하여 구성 요소 의 비동기 계산 속성 을 만 들 고 사용 할 수 있 습 니 다.
프로젝트 의 루트 디 렉 터 리 에 얀 이나 npm 를 통 해 vue-async-computed 플러그 인 을 설치 할 수 있 습 니 다.
# Yarn
$ yarn add vue-async-computed
# NPM
$ npm i vue-async-computed --save
// main.js
import Vue from 'vue';
import AsyncComputed from 'vue-async-computed'
import App from 'App.vue';
Vue.use(AsyncComputed);
new Vue({
el: '#app',
render: h => h(App)
});
항목 에서 인용
vue-async-computed 을 확인 한 후에 우 리 는 이 플러그 인 을 사용 할 수 있 습 니 다.이 플러그 인 을 어떻게 사용 하 는 지 사용 하기 전에 개념 을 간단하게 알 아 보 세 요.Vue 에서 표준 계산 속성 과 비동기 속성 사이 에 약간의 차이 가 있 습 니 다.
대부분의 경우,그것들 을 되 돌려 주 는 계산 속성 으로 볼 수 있다.
<!-- MyComponent.vue -->
<template>
<!-- myResolvedValue "*Fancy* Resolved Value" -->
<h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template>
<script>
export default {
asyncComputed: {
myResolvedValue () {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
})
}
}
}
</script>
<!-- MyComponent.vue -->
<template>
<!-- myResolvedValue "*Fancy* Resolved Value" -->
<h2>Asynchronous Property {{ myResolvedValue }}</h2>
</template>
<script>
function fancinessComesLater () {
return new Promise((resolve, reject) => {
setTimeout(() => resolve('*Fancy* Resolved Value!'), 1000)
})
}
export default {
asyncComputed: {
async myResolvedValue() {
return await fancinessComesLater()
}
}
}
</script>
총결산
오늘 은 주로 Vue 의 계산 속성 을 배 웠 습 니 다.Vue 의 계산 속성 은 여러 데이터 나 한 데 이 터 를 감청 하여 하나의 상태 값 을 유지 할 수 있 습 니 다.그 중 하나 또는 여러 데이터 가 변화 하면 전체 함수 체 를 다시 계산 하고 레 알 마드리드 의 상태 값 을 다시 계산 하여 해당 하 는 보기(View)를 업데이트 합 니 다.그 다음으로 계산 속성 은 캐 시가 있어 Vue 의 방법 보다 성능 이 좋 습 니 다.그러나 Vue 의 계산 속성 은 모두 동기 화 되 어 있 습 니 다.비동기 가 필요 하 다 면vue-async-computed에 의존 해 야 합 니 다.
자신 이 Vue 의 초보 자 이기 때문에 Vue 의 계산 속성 도 표면적 인 이해 에 그 쳤 을 뿐 깊 은 차원 에서 보면 어느 정도 문제 가 있 을 수 있다.우리 아 줌 마 들 이 각자 의 경험 을 지적 하거나 제공 할 수 있 기 를 바 랍 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
