방법 대 Vue에서 계산된 방법
a의 주요 차이점은 무엇인가?methods그리고 acomputedVue.js의 가치?
그들은 똑같고 서로 바꿀 수 있어 보인다.
계산된 값과 방법은 Vue에서 매우 다르며 대부분의 경우 상호 교환할 수 없다.
계산된 속성
계산된 값에 더 적합한 이름은 계산된 속성이다.실제로 Vue가 인스턴스화되면 계산된 속성은 게터(getter)와 때로는 세터(setter)로 Vue의 속성으로 변환된다.기본적으로 계산된 값을 계산하는 데 사용되는 기본 값 중 하나가 업데이트될 때마다 자동으로 업데이트되는 파생 값으로 생각할 수 있다.계산된 연산자를 호출하지 않고 어떤 파라미터도 허용하지 않는다.데이터 속성과 마찬가지로 계산된 속성을 참조하는 경우.설명서의 전형적인 예는 다음과 같다.
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
다음과 같이 DOM에서 언급되는 사항:
<p>Computed reversed message: "{{ reversedMessage }}"</p>
계산된 값은 Vue에 존재하는 데이터를 조작하는 데 매우 유용하다.데이터를 필터링하거나 변환할 때마다 일반적으로 계산된 값을 사용하십시오.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.names.filter(n => n.startsWith("B"))
}
}
<p v-for="name in startsWithB">{{name}}</p>
계산된 값 또한 변경되지 않았을 때(예를 들어 루프에 있지 않을 수 있기 때문에) 다시 계산할 필요가 없는 값을 반복적으로 계산하지 않도록 캐시된다.
방법
메소드는 Vue 인스턴스에 바인딩된 함수일 뿐이다.명시적으로 불러야 평가된다.모든 javascript 기능과 마찬가지로 파라미터를 받아들이고 호출될 때마다 재평가된다.방법은 모든 기능이 유용한 동일한 상황에서 유용하다.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.startsWithChar("B")
},
startsWithM(){
return this.startsWithChar("M")
}
},
methods:{
startsWithChar(whichChar){
return this.names.filter(n => n.startsWith(whichChar))
}
}
Vue의 설명서는 정말 훌륭하고 쉽게 접근할 수 있다.난 그걸 추천한다.
@gleenk가 방법과 계산된 속성 사이의 캐시와 의존성 차이를 분명히 하기 위해 실용적인 예를 요구했듯이, 나는 다음과 같은 간단한 시나리오를 보여주겠다.
app.js
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
addToAmethod: function(){
console.log('addToAmethod');
return this.a + this.age;
},
addToBmethod: function(){
console.log('addToBmethod');
return this.b + this.age;
}
},
computed: {
addToAcomputed: function(){
console.log('addToAcomputed');
return this.a + this.age;
},
addToBcomputed: function(){
console.log('addToBcomputed');
return this.b + this.age;
}
}
});
여기 동일한 작업을 수행하는 두 가지 방법과 두 가지 계산된 속성이 있다. 방법addToAmethod&addToBmethod 및 계산된 속성addToAcomputed&addToBcomputed add + (message:age값)을 다음 중 하나에 적용a또는b. 방법과 관련하여, 하나의 특정 방법에 대한 종속성이 변경되지 않았더라도 나열된 속성 중 하나에 대해 작업이 수행될 때마다 둘 다 호출된다.계산된 속성의 경우, 코드는 종속성이 변경된 경우에만 실행된다. 예를 들어, A 또는 B를 참조하는 특정 속성 값 중 하나가 트리거된다.addToAcomputed또는addToBcomputed각각,
방법과 계산된 서술은 꽤 비슷해 보이지만, @Abdullah Khan은 이미 그것을 명시했으므로, 그들은 같은 것이 아니다!이제 HTML을 추가하여 모든 것을 함께 실행하고 차이점이 어디에 있는지 알아보도록 하자.
메소드 케이스 데모
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
addToAmethod: function(){
console.log('addToAmethod');
return this.a + this.age;
},
addToBmethod: function(){
console.log('addToBmethod');
return this.b + this.age;
}
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Methods - stackoverflow</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Methods</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAmethod() }}</p>
<p>Age + B = {{ addToBmethod() }}</p>
</div>
</body>
<script src="app.js"></script>
</html>설명한 결과
A에 추가 버튼을 클릭하면 모든 방법이 호출된다(위의 콘솔 로그 화면 결과 참조),addToBmethod()또한 실행되지만 나는 "B에 추가" 버튼을 누르지 않았다; B를 가리키는 속성 값은 변하지 않았다.우리가 "B에 추가" 버튼을 클릭하기로 결정했을 때 동일한 행동이 나타난다. 왜냐하면 다시 두 방법 모두 의존성 변경과 무관하게 호출될 것이기 때문이다.이 시나리오에 따르면, 의존성이 변하지 않은 경우에도 매번 방법을 실행하기 때문에 이것은 잘못된 관행이다.변경되지 않은 속성 값에 대한 캐시가 없기 때문에 이것은 정말로 자원을 소비한다.
Computed property case 데모
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
computed: {
addToAcomputed: function(){
console.log('addToAcomputed');
return this.a + this.age;
},
addToBcomputed: function(){
console.log('addToBcomputed');
return this.b + this.age;
}
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Computed properties - stackoverflow</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Computed Properties</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAcomputed }}</p>
<p>Age + B = {{ addToBcomputed }}</p>
</div>
</body>
<script src="app.js"></script>
</html>설명한 결과
A에 추가 버튼을 클릭하면 계산된 속성만addToAcomputed이미 말했듯이 계산된 속성은 종속성이 변경된 경우에만 실행되기 때문에 호출된다.그리고 "B에 추가" 버튼을 누르지 않았고 B에 대한 나이 속성 값이 변하지 않았으므로, 계산된 속성을 호출하여 실행할 이유가 없다.addToBcomputed그래서 어떤 의미에서 계산된 속성은 일종의 캐시처럼 B 속성에 대해 "변동되지 않은 동일한" 값을 유지하고 있다.그리고 이런 상황에서 이것은 좋은 관행을 고려하는 것이다.
여기 이 질문에 대한 설명이 있다.
메서드 사용 시기
- DOM에서 발생하는 일부 이벤트에 대응하려면 다음과 같이 하십시오.
- 구성 요소에 문제가 발생할 때 함수를 호출하는 방법.
- 계산된 속성이나 관찰자로부터 메서드를 호출할 수 있다.
계산된 속성을 사용해야 하는 경우
- 기존 데이터 원본에서 새 데이터를 구성해야 하는 경우
- 하나 이상의 데이터 속성으로 구성된 템플릿에 사용하는 변수가 있는 경우
- 복잡하고 중첩된 속성 이름을 더 읽기 쉽고 사용하기 쉬운 이름으로 줄이려는 경우(원래 속성이 변경될 때 업데이트)
- 템플릿의 값을 참조해야 한다.이 경우 캐시에 저장되기 때문에 계산된 속성을 만드는 것이 가장 좋다.
- 둘 이상의 데이터 속성의 변경 내용을 들어야 하는 경우
~로부터
..기존 속성은 종속성을 기반으로 캐시된다.계산된 속성은 그것의 의존성 중 일부가 변경된 경우에만 재평가된다.
데이터를 캐시하려면 데이터를 캐시하지 않으려면 다른 한편으로는 계산 속성을 사용하십시오. 간단한 메서드 속성을 사용하십시오.
계산된 방법과 방법의 차이점 중 하나.카운터 값을 반환하는 함수가 있다고 가정합시다.함수가 계산된 방법과 방법 모두에서 어떻게 동작하는지 살펴봅시다.
계산된
처음 실행 시 기능 내부의 코드가 실행되며, vuejs는 카운터 값을 캐시에 저장(빠른 액세스를 위해)한다.그러나 우리가 다시 그 기능을 호출할 때 vuejs는 그 기능 안에 쓰여진 코드를 다시 실행하지 않을 것이다.먼저 카운터에 변화가 있는지 없는지 점검한다.변경사항이 있는 경우, 오직 그 기능 안에 있는 코드를 다시 실행한다.카운터 vuej가 변경되지 않으면 이 기능이 다시 실행되지 않는다.단순히 캐시에서 이전 결과를 반환할 뿐이다.
방법
이것은 자바스크립트의 일반적인 방법과 같다.우리가 메소드를 호출할 때마다 카운터의 변경사항과 상관없이 항상 함수 내부의 코드를 실행할 것이다.
메소드는 코드 변경과 상관없이 항상 코드를 다시 실행한다.여기서 계산된 대로 코드를 다시 실행하려면 해당 코드 종속성 값 중 하나가 변경된 경우에만 코드를 다시 실행하십시오.그렇지 않으면 다시 실행하지 않고 캐시에서 이전 결과를 얻을 수 있다.
계산된 속성
계산된 속성을 계산된 값이라고도 한다.그것은 그들이 업데이트되고 언제든지 바뀔 수 있다는 것을 의미한다.또한, 그것은 바뀔 때까지 데이터를 캐시한다.Vue가 인스턴스화되면 계산된 속성이 속성으로 변환된다.
한 가지 더 말씀드리고 싶은 것은, 컴퓨터 속성을 괄호 없이도 호출하는 동안 계산된 속성에서 어떤 매개 변수도 전달할 수 없다는 겁니다.
방법들
방법은 기능과 같고 작용도 같다.게다가 어떤 방법은 부르지 않으면 아무 소용이 없다.또한, 모든 자바스크립트 기능과 마찬가지로 매개 변수를 받아들이고 호출될 때마다 다시 평가될 것이다.그 이후에는 값을 캐슁할 수 없음
괄호를 호출하는 방법에는 괄호 안에 있고, 그 안에 하나 이상의 파라미터를 보낼 수 있다.
같은 질문에 우연히 마주쳤다.내게는 이렇게 더 명확하다.
- Vue.js는 어떤 방법이 뒤따르는 것을 보면, 어떤 방법으로 전화를 해야 하는지, 언제 전화를 해야 하는지 정확히 알고 있다.
<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button
<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */
- DOM을 업데이트하는 페이지에서 이벤트가 트리거될 때마다(또는 단순히 페이지의 일부를 다시 렌더링해야 할 때) 없이 메서드를 호출할 때 호출된다.심지어 그 방법이 사건이 촉발되는 것과 아무런 관련이 없을 때도 말이다.
<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
messageUppercase() {
console.log("messageUpercase");
return this.message.toUpperCase();
}
}
/* The method `messageUppercase()` is called on every button click, mouse hover
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/
- 계산된 속성은 함수 정의의 단어로 참조되는 속성 값이 변경될 때만 호출된다.
<p>Uppercase message: {{ messageUppercase }}</p>
data() {
return {
message: "I love Vue.js"
}
},
computed: {
messageUppercase() {
console.log("messageUpercase");
return this.message.toUpperCase();
}
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific
event changes the value of message. */
여기서 빼는 것은 그 방법을 사용하는 것이 가장 좋은 방법이라는 것이다.computed은 경우서이다.v-on directive.
vueJs 설명서에 따른 간단한 방법:
이에 비해 메서드 호출은 리렌더가 발생할 때마다 항상 기능을 실행한다.
계산된 속성은 반응하는 일부 종속성이 변경된 경우에만 재평가된다.
Vue 3과 함께 제공되며 Vue 2의 플러그인으로 사용할 수 있는 vue composition API에서 방법과 계산된 속성은 다른 구문이다.
예:
계산된 :
기본적으로 게터 콜백을 매개 변수로 삼고 ref, reactive 또는 store state와 같은 다른 속성에 기반하여 불변의 ref를 반환하는 기능이다.
import {computed,ref} from 'vue'
export default{
setup(){
const count=ref(0);
const doubleCount=computed(()=>count.value*2)
return {count,doubleCount} //expose the properties to the template
}
}
방법들
Vue와 바닐라 j에서 모두 동일한 방식으로 동작하는 일반 자바스크립트 기능인 경우, 템플릿에 노출되어 이벤트 핸들러로 사용되므로 무한 렌더링과 같은 문제를 야기할 수 있는 렌더링 용도로 사용해서는 안 된다.
import {computed,ref} from 'vue'
export default{
setup(){
const count=ref(0);
const doubleCount=computed(()=>count.value*2)
function increment(){
ref.value++
}
return {count,doubleCount,increment} //expose the properties/functions to the template
}
}
차이:
계산된 :
- 기능이 아닌 불변의 속성으로 평가된다.
- 그것은 다른 속성을 관찰하고 그 속성을 기초로 하여 속성을 반환한다.
- 매개 변수를 사용할 수 없음.
- 시계 속성을 사용해서 볼 수 있다.
방법:
- 계산/감시 속성 또는 기타 함수 내에서 코드를 리팩터링하는 데 사용
- 이벤트 핸들러로 사용
- 렌더링 문제를 방지하기 위해 템플릿 내부에서 호출해서는 안 된다.
다른 멤버들의 답변을 보완하도록 노력하겠다.이 사례와 설명은 내가 계산된 속성의 요지를 완전히 이해하게 만들었다.내 글을 읽고 너도 알아줬으면 좋겠어.
데이터를 변경해야 할 경우에는 반드시 방법을 사용해야 한다.그리고 기존 데이터의 표시를 변경해야 할 경우 계산된 속성을 사용하십시오.두 가지 개념을 모두 연습할 때, 당신은 그것들을 쉽게 사용할 것이다.여기 큐리컬 키 몇 개가 있다.
- 계산된 속성은 항상 값을 반환해야 한다.
- 계산된 속성은 데이터를 변환하는 데만 사용되며 우리의 프레젠테이션 계층을 위해 데이터를 변경하거나 기존 데이터를 변경해서는 안 된다.
이미 읽었거나 내 예시 코드를 실행한 후, 계산된 속성에 제시된 값만 (메서드 내부 또는 사용자 입력 또는 다른 수단에 의해) 변경된다는 것을 알게 될 것이다. 계산된 속성은 다시 계산되고 캐시될 것이다.그러나 메서드가 호출될 때마다 결과와 상관없이 실행된다(예: 내 예에서는 값이 0 값에 도달하면 계산된 속성은 더 이상 다시 계산되지 않음).
이 예에는 간단한 시스템이 있다. 여기서 다음을 수행하십시오.
- 현금을 소유하다.
- 은행 계좌의 현금;
- 귀하의 은행 계좌에서 인출할 수 있는 가능성.
- (인피니티 돈으로) 어떤 사람으로부터 돈을 빌려줄 수 있는 가능성.
new Vue({
el: '#app',
data: {
infinity: Infinity,
value: 3,
debt: -6,
cash: 9,
moneyInBank: 15,
},
computed: {
computedPropRemainingCashFundsIfPaid: function() {
console.log('computedPropRemainingCashFundsIfPaid');
return this.debt + this.cash;
},
computedPropRemainingTotalFunds: function() {
console.log('computedPropRemainingTotalFunds');
return this.cash + this.moneyInBank + this.debt;
}
},
methods: {
depositFunds: function(from, to, value, limit = false) {
if (limit && (this[to] + value) >= 0) { // if you try to return greater value than you owe
this[from] += this[to];
this[to] = 0;
} else if (this[from] > value && this[from] - value >= 0) { // usual deposit
this[to] += value;
this[from] -= value;
} else { // attempt to depost more than you have
this[to] += this[from];
this[from] = 0;
}
},
repayADebt: function() {
this.value = Math.abs(this.value);
if (this.debt < 0) {
this.depositFunds('cash', 'debt', this.value, true);
}
console.log('Attempt to repayADebt', this.value);
},
lendAmount: function() {
this.depositFunds('infinity', 'debt', -Math.abs(this.value));
console.log('Attempt to lendAmount', this.value);
},
withdraw: function() {
if (this.moneyInBank) {
this.depositFunds('moneyInBank', 'cash', this.value);
}
console.log('Attempt to withdraw', this.value);
}
}
});* {
box-sizing: border-box;
padding: 0;
margin: 0;
overflow-wrap: break-word;
}
html {
font-family: "Segoe UI", Tahoma, Geneva, Verdana;
font-size: 62.5%;
}
body {
margin: 0;
font-size: 1.6rem;
}
#app {
margin: 3rem auto;
max-width: 50vw;
padding: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
label,
input {
margin-bottom: 0.5rem;
display: block;
width: 100%;
}
label {
font-weight: bold;
}
ul {
list-style: none;
margin: 1rem 0;
padding: 0;
}
li {
margin: 1rem 0;
padding: 1rem;
border: 1px solid #ccc;
}
.grid {
display: grid;
grid: 1fr / 1fr min-content 1fr min-content;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}
.grid> :is(button, input) {
height: 3rem;
margin: 0;
}
.computed-property-desc {
padding: 1rem;
background-color: rgba(0, 0, 0, 0.3);
text-align: justify;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A First App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app">
<h1>Computed Properties Guide</h1>
<p style="background-color: bisque;">
Let's assume that you have <span v-once>{{ cash }}</span>$; And you need to pay a debt=<span v-once>{{ debt }}</span>
</p>
<p>Your bank account: {{ moneyInBank }}$ <button v-on:click="withdraw(value)">Withdrow {{ value }}$ from
bank</button></p>
<p>Your cash: {{ cash }}$</p>
<p>Your debt: {{ debt }}$ <button v-on:click="lendAmount(value)">Lend {{ value }}$ from Infinity</button></p>
<div class="grid">
<button v-on:click="repayADebt(value)">Repay a debt</button>
<span>in amout of</span>
<input type="text" v-model.number="value">
<span>$</span>
</div>
<p>computedPropRemainingCashFundsIfPaid/<br><mark>Available funds in case of debt repayment</mark> = {{ computedPropRemainingCashFundsIfPaid }}$</p>
<p>computedPropRemainingTotalFunds = {{ computedPropRemainingTotalFunds }}$</p>
<p class="computed-property-desc">when you need to change data, you will use methods. And When you need to change the presentation of existing data, you will use computed properties. As you practice both concepts, it will become easier which one should you use. Very important notes:
1. it must always return a value; 2. computed properties are only used for transforming data and not for chaning it for our presentation layer | they should not alter or change the existing data</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</body>
</html>Vue3 설명서에 나와 있는 내용은 다음과 같다. 예를 들어 확인하십시오.
최종 결과에서, 두 접근법은 실제로 정확히 동일하다.그러나 차이점은 계산된 속성이 반응하는 의존성을 기반으로 캐시된다는 것이다.계산된 속성은 그것의 반응하는 의존성의 일부가 변경되었을 때만 재평가된다.[...] 비교해서, 메서드 호출은 재렌더가 발생할 때마다 항상 기능을 실행할 것이다.
추가 링크
참조URL: https://stackoverflow.com/questions/44350862/methods-vs-computed-in-vue
'Programing' 카테고리의 다른 글
| 어떤 환원 미들웨어를 선택해야 할까? (0) | 2022.04.06 |
|---|---|
| Vue 3, 변동 변화에 대해 $emit 호출 (0) | 2022.04.06 |
| 리디렉션 후 손실되는 대응 컨텍스트 (0) | 2022.04.05 |
| VuetifyJS, 라우터 링크가 커서로 표시되지 않음 (0) | 2022.04.05 |
| 셸=True로 시작된 python 하위 프로세스를 종료하는 방법 (0) | 2022.04.05 |