Vue에서 계산 된 방법과 방법

178

Vue.js에서 메소드와 계산 된 값의 주요 차이점은 무엇입니까?

그들은 동일하고 상호 교환 가능해 보입니다.

— 부트 스트랩 4
소스

도움이 될 수도 있습니다 : vuejs.org/v2/guide/computed.html#Computed-Properties

— DunDev

1

@xDreamCoding이 질문을 실제로 해결하기 위해 링크 된 답변이 있지만,이 질문은 결코 중복되지 않습니다. 게다가 더 유명합니다.

— Romain Vincent

계산 된 속성과 방법의 제목 아래에서이 주제에 대해 약간의 설명을 제공하는 설명서를 참조하십시오. vuejs.org/v2/guide/computed.html

— Kshitij Dhyani

243

계산 된 값과 방법은 Vue에서 매우 다르며 대부분의 경우 상호 교환 할 수 없습니다.

계산 된 재산

계산 된 값에 더 적합한 이름은 계산 된 속성 입니다. 실제로 Vue가 인스턴스화되면 계산 된 속성은 getter 및 때로는 setter를 사용하여 Vue의 속성으로 변환됩니다. 기본적으로 계산 된 값을 계산하는 데 사용되는 기본 값 중 하나가 업데이트 될 때마다 자동으로 업데이트되는 파생 값으로 생각할 수 있습니다. 당신은하지 않습니다 전화 A는 계산이 매개 변수를 허용하지 않습니다. 데이터 속성과 마찬가지로 계산 된 속성을 참조합니다. 다음은 설명서 의 고전적인 예입니다 .

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 인스턴스에 바인딩 된 함수일뿐입니다. 명시 적으로 호출 할 때만 평가됩니다. 모든 자바 스크립트 함수와 마찬가지로 매개 변수를 허용하며 호출 될 때마다 다시 평가됩니다. 방법은 모든 기능이 유용한 동일한 상황에서 유용합니다.

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(whichCharacter))
    }
}

Vue의 문서 는 정말 훌륭하고 쉽게 접근 할 수 있습니다. 난 그것을 추천 해.

— 버트
소스

1

c에서 f 로의 온도 변환과 같이 사용자로부터 두 개의 입력이 있고 그 반대로 두 입력이 서로의 값을 결정할 수있는 경우 albireo.ch/ 온도 변환기를 참조하십시오. 두 개의 입력이 변환 버튼을 누르지 않아도 자동으로 반응합니다. 어느 것이 계산 또는 방법을 사용하기에 가장 적합한가요?

— Bootstrap4

2

두고 특정의 UI 여기서 입력 사이의 관계 원형, I는 방법으로 갈 것이다. codepen.io/Kradek/pen/gROQeB?editors=1010

— Bert

2

@ Bootstrap4 그러나 여기에도 계산이 있지만 더 복잡합니다. codepen.io/Kradek/pen/gROQeB?editors=1010

— Bert

3

> 메소드는 명시 적으로 호출 할 때만 평가됩니다. 이 비디오에 따르면 : youtube.com/watch?v=O14qJr5sKXo

— Cameron Hudson

2

@CameronHudson 비디오의 예제에서 메서드는 템플릿 에서 명시 적으로 참조되므로 평가 됩니다. 차이점을 보여주는 예 는 다음과 같습니다 . 템플릿에서 명시 적으로 참조 된 경우 데이터가 변경 될 때만 메서드가 호출됩니다 .

— Bert

60

@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;
        }
    }
});

여기에는 동일한 작업을 수행하는 2 개의 메서드와 2 개의 계산 속성이 있습니다. 메소드 addToAmethod& addToBmethod및 계산 된 특성 addToAcomputed&은 addToBcomputed모두 + 또는 +에 +20 (즉, age값)을 추가합니다 . 방법에 관해서는, 이들은되는 양 이라 모든 동작이 수행 된 시간의 어느 한 특정 방식에 대한 종속성이 변경되지 않은 경우에도, 나열된 특성을. 계산 된 속성의 경우 코드는 종속성이 변경된 경우에만 실행됩니다. 예를 들어, A 또는 B를 의미하는 특정 속성 값 중 하나가 트리거 또는 각각.abaddToAcomputedaddToBcomputed

방법과 계산 설명은 꽤 비슷한 것 같다,하지만 @Abdullah 칸이 이미 것처럼 지정 을, 그들은 같은 것이 아니다 ! 이제 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에 추가" 버튼을 클릭하기로 결정한 경우에도 동일한 동작이 발생 합니다. 두 방법 모두 종속성 변경과 독립적으로 호출되기 때문입니다. 이 시나리오에 따르면 의존성이 변경되지 않은 경우에도 매번 메소드를 실행하기 때문에 이는 나쁜 습관 입니다. 변경되지 않은 속성 값에 대한 캐시가 없기 때문에 실제로 리소스를 소비합니다.

버튼 방식

계산 된 속성 사례 데모

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 속성에 대해 "변경되지 않은"값을 유지합니다. 이 상황에서 이것은 좋은 습관 으로 간주됩니다 .

계산 된 버튼

— 줄리 오오 밤비니
소스

3

1 버튼을 눌렀을 때 모든 방법이 실행되는 이유는 무엇입니까? 이유 / 논리는 무엇입니까?

— Bsienn

1

@Bsienn 좋은 질문입니다. 이유는 기본적으로 Vue는 업데이트 된 내용에 따라 어떤 메소드 중 하나를 실행 해야하는지 알지 못하기 때문입니다. 그리고 이것은 계산 된 속성이 수행하는 일종의 연산이며, 계산 또는 재 계산이 필요한 변수를보고 필요할 때만 실행됩니다.

— Giulio Bambini

2

그리고 방법을 사용하는 이유는 무엇입니까? 계산 된 속성이 더 나은 것 같습니다 ( 'get'메소드에 대해 이야기하고 있다고 가정) ...

— user3529607

5

@ user3529607이지만 계산 된 속성에는 인수가 없습니다.

— Rodion Golovushkin

3

@ user3529607 내가 이해할 수있는 것으로부터, 방법은 vue의 인스턴스를 마운트하거나 생성하는 동안 유용 할 수 있습니다. 계산 된 속성으로는 동일한 작업을 수행 할 수 없습니다. 또한 계산 된 속성의 값을 반환해야합니다.

— Dhaval Chheda

13

로부터 docs

..computed 속성은 해당 종속성을 기반으로 캐시됩니다. 계산 된 속성은 일부 종속성이 변경된 경우에만 다시 평가됩니다.

반면에 데이터를 캐시하려면 계산 속성을 사용하고 데이터를 캐시하지 않으려면 간단한 메서드 속성을 사용하십시오.

— 압둘라 칸
소스

1

안녕하세요, 실제 사용 차이를 보여주는 유용한 예제를 작성할 수 있습니까?

— Davide De Maestri

@gleenk 필자는 메소드와 계산 된 속성 간의 이러한 캐시 / 종속성 차이를 보여주는 실용적인 예제를 추가 할 것입니다. 감사하겠습니다.

— Giulio Bambini

감사합니다 @GiulioBambini

— Davide De Maestri

7

계산과 방법의 차이점 중 하나입니다. 카운터 값을 반환하는 함수가 있다고 가정하십시오 (카운터는 가변적입니다). 계산 된 함수 와 메소드 에서 함수가 어떻게 동작하는지 봅시다

계산

처음 실행하면 함수 내부의 코드가 실행되고 vuejs는 카운터 값을 캐시에 저장합니다 (더 빠르게 액세스하기 위해). 그러나 함수를 다시 호출하면 vuejs는 해당 함수 안에 작성된 코드를 다시 실행하지 않습니다. 먼저 카운터의 변경 사항을 확인합니다. 변경 사항이 있으면 해당 기능 내에있는 코드 만 다시 실행됩니다. 카운터 변경 사항이 없으면 vuejs는 다시 함수를 실행하지 않습니다. 단순히 캐시에서 이전 결과를 반환합니다.

방법

이것은 자바 스크립트의 일반적인 방법과 같습니다. 메소드를 호출 할 때마다 카운터의 변경 사항에 관계없이 항상 함수 내에서 코드를 실행합니다.

메소드는 코드의 변경에 관계없이 항상 코드를 다시 실행합니다. 계산 된대로 코드가 다시 실행되면 종속성 값 중 하나가 변경된 경우에만 해당됩니다. 그렇지 않으면 다시 실행하지 않고 캐시에서 이전 결과를 제공합니다.

— 팔라 몰라 사이
소스

6

이 질문에 대한 분석은 다음과 같습니다.

방법을 사용하는 경우

DOM에서 발생하는 일부 이벤트에 반응하려면
컴포넌트에서 무언가 발생했을 때 함수를 호출합니다.
계산 된 속성 또는 감시자에서 메서드를 호출 할 수 있습니다.

계산 된 속성을 사용하는 경우

기존 데이터 소스에서 새 데이터를 작성해야합니다
하나 이상의 데이터 속성으로 작성된 템플릿에 사용하는 변수가 있습니다
복잡하고 중첩 된 속성 이름을보다 읽기 쉽고 사용하기 쉬운 이름으로 줄이려고합니다 (그러나 원본 속성이 변경 될 때 업데이트)
템플릿에서 값을 참조해야합니다. 이 경우 계산 된 속성이 캐시되므로 캐시 된 속성을 만드는 것이 가장 좋습니다.
둘 이상의 데이터 속성 변경 사항을 청취해야합니다.

— 디에고 페레이라
소스

2

계산 된 속성

계산 된 속성을 계산 된 값이라고도합니다. 즉, 업데이트되고 언제든지 변경할 수 있습니다. 또한 변경 될 때까지 데이터를 캐시합니다. Vue가 인스턴스화되면 계산 된 속성이 속성으로 변환됩니다.

공유하고 싶은 한 가지 더, 괄호가 필요없는 컴퓨터 속성을 호출하는 동안 계산 속성에 매개 변수를 전달할 수 없습니다.

행동 양식

메소드는 함수와 동일하며 동일한 방식으로 작동합니다. 게다가 메소드는 호출하지 않는 한 아무 것도 수행하지 않습니다. 또한 모든 자바 스크립트 함수와 마찬가지로 매개 변수를 허용하며 호출 될 때마다 다시 평가됩니다. 그 후에는 값을 캐시 할 수 없습니다

괄호를 호출하는 메소드에는 거기에 하나 이상의 매개 변수를 보낼 수 있습니다.

— 라자 트
소스

0

같은 질문에 걸려 넘어졌다. 나에게는 다음과 같이 더 분명하다.

Vue.js는 그 v-on directive뒤에 메소드 가 표시 될 때 호출 할 메소드 와 호출 시기 를 정확히 알고 있습니다.

<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 */

메소드를 호출 하지 않고v-on directive 메소드를 호출 하면 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.*/

계산 속성은 함수 정의에서 단어 로 참조되는 속성 값이 변경 될 때만 호출 됩니다 .this

<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.

— 다크 라이트 1
소스