vue의 계산된 속성에 대해 자세히 알아보기
다음 Vue.js 튜토리얼 열에서는 vue의 계산된 속성을 안내합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
1. 계산된 속성이란 무엇입니까?
템플릿의 표현식은 매우 편리하지만 원래는 간단한 작업을 위해 설계되었습니다. 템플릿에 논리를 너무 많이 넣으면 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 예를 들면 다음과 같습니다.
<p id="example">
{{ message.split('').reverse().join('') }}</p>여기 표현식에는 3가지 연산이 포함되어 있는데 이는 그다지 명확하지 않습니다. 따라서 복잡한 논리가 발생하면 이를 처리하기 위해 계산된 Vue의 특수 계산 속성을 사용해야 합니다.
2. 계산된 속성의 사용
연산, 함수 호출 등 다양한 복잡한 논리는 결과가 반환되는 한 계산된 속성에서 완료될 수 있습니다.
계산된 속성을 사용하여 위의 예를 다시 작성해 보겠습니다
<p id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了</p>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () { // `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});결과:
원본 메시지: "Hello"
계산된 역전 메시지: "olleH"
위 예의 간단한 사용법에 더해 계산된 속성 여러 Vue 인스턴스의 데이터를 사용할 수도 있습니다. 데이터가 변경되는 한 계산된 속성이 다시 실행되고 뷰가 업데이트됩니다.
<body>
<p id="app">
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p>
</p></body>var app = new Vue({
el: '#app',
data: {
package1: {
count: 5,
price: 5
},
package2: {
count: 10,
price: 10
}
},
computed: {
price: function(){ return this.package1.count*this.package1.price+this.package2.count*this.package2.price //总价随着货物或价格的改变会重新计算
}
},
methods: { //对象的方法
add: function(){ this.package1.count++
}
}
});첫째, 계산된 속성은 다른 계산된 속성에 따라 달라질 수 있습니다. 둘째, 계산된 속성은 현재 Vue 인스턴스의 데이터에 의존할 수 있을 뿐만 아니라 다음에도 의존할 수 있습니다. 다른 인스턴스 , 의 데이터:
<p id="app1"></p>
<p id="app2">{{ reverseText}}</p>var app1 = new Vue({
el: '#app1',
data: {
text: 'computed'
}
});var app2 = new Vue({
el: '#app2',
computed: {
reverseText: function(){
return app1.text.split('').reverse().join(''); //使用app1的数据进行计算 }
}
});var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
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];
}
}
}
});//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。3. 계산된 속성 캐싱
위의 예에서는 계산된 속성을 사용하는 것 외에도 다음과 같이 표현식에서 메서드를 호출하여 동일한 효과를 얻을 수 있습니다.<p>{{reverseTitle()}}</p>// 在组件中methods: {
reverseTitle: function () { return this.title.split('').reverse().join('')
}
}reverseTitle()을 사용하여 값을 가져오고 다른 쪽은 reverseTitle을 사용하여 값을 가져옵니다.
그러나 차이점은계산된 속성은 해당 종속성에 따라 캐시됩니다. 계산된 속성은 관련 종속성이 변경될 때만 재평가됩니다.
제목이 변경되지 않는 한 reverseTitle 계산 속성에 여러 번 액세스하면 함수를 다시 실행할 필요 없이 이전 계산 결과가 즉시 반환됩니다.
간단한 예:
<p>{{reverseTitle}}</p>
<p>{{reverseTitle1()}}</p>
<button @click="add()">补充货物1</button>
<p>总价为：{{price}}</p> computed: {
reverseTitle: function(){ return this.title.split('').reverse().join('') //而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
},
price: function(){ return this.package1.count*this.package1.price+this.package2.count*this.package2.price
}
},
methods: { //对象的方法
add: function(){ this.package1.count++
},
reverseTitle1: function(){ return this.title.split('').reverse().join('') //点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
}
},항상함수를 다시 실행합니다.
캐싱이 왜 필요한가요? 거대한 배열을 탐색하고 많은 계산을 수행해야 하는 값비싼 계산 속성A이 있다고 가정해 보겠습니다. 그러면 A 에 의존하는 다른 계산된 속성이 있을 수 있습니다.
캐시가 없으면 필연적으로A의 getter가 여러 번 실행됩니다! 캐싱을 원하지 않으면 대신 메소드를 사용하십시오.
관련 권장 사항:더 많은 프로그래밍 관련 지식을 원하시면 문의하세요. 방문:
프로그래밍 교육! !
위 내용은 vue의 계산된 속성에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7622
15
1389
52
89
11
70
19
31
138
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
Vue 용 버튼에 기능을 추가하는 방법
Apr 08, 2025 am 08:51 AM
HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.
vue.js로 JS 파일을 참조하는 방법
Apr 07, 2025 pm 11:27 PM
vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.
Vue에서 시계를 사용하는 방법
Apr 07, 2025 pm 11:36 PM
vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.
Vue 다중 페이지 개발은 무엇을 의미합니까?
Apr 07, 2025 pm 11:57 PM
VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.
Vue가 이전 페이지로 돌아 오는 방법
Apr 07, 2025 pm 11:30 PM
vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.
Vue Traversal 사용 방법
Apr 07, 2025 pm 11:48 PM
vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.
VUE 버전을 쿼리하는 방법
Apr 07, 2025 pm 11:24 PM
Vue DevTools를 사용하여 브라우저 콘솔에서 vue 탭을 보면 VUE 버전을 쿼리 할 수 있습니다. npm을 사용하여 "npm list -g vue"명령을 실행하십시오. package.json 파일의 "종속성"객체에서 vue 항목을 찾으십시오. Vue Cli 프로젝트의 경우 "vue -version"명령을 실행하십시오. & lt; script & gt에서 버전 정보를 확인하십시오. vue 파일을 나타내는 html 파일의 태그.
