javascript - vue實例 - vue用法




方法vs在Vue中計算 (4)

Vue.js中方法和計算值之間的主要區別是什麼?

它們看起來一樣,可以互換。


來自 docs

..computed屬性根據其依賴項進行緩存。 計算屬性僅在其某些依賴項發生更改時才會重新計算。

如果您希望緩存數據,則另一方面如果不希望緩存數據,請使用Computed屬性使用簡單的Method屬性。


由於@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個計算屬性來執行相同的任務。 方法 addToAmethodaddToBmethod 和計算屬性 addToAcomputedaddToBcomputed 都將+20(即 age 值)添加到 ab 。 關於這些方法, 每次 任何 列出的屬性執行操作時 都會 調用它們,即使某個特定方法的依賴關係沒有更改也是如此。 對於計算屬性,僅在依賴關係發生變化時才執行代碼; 例如,引用A或B的特定屬性值之一將分別觸發 addToAcomputedaddToBcomputed

方法和計算描述看起來非常相似,但正如@Abdullah Khan已經 specified 它, 它們不是一回事 ! 現在讓我們嘗試添加一些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 - </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屬性案例演示

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 - </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屬性的“相同的未更改”值,就像一種緩存一樣。 在這種情況下,這是一種 良好的做法


計算和方法之間的區別之一。 假設我們有一個返回計數器值的函數。(計數器只是變量)。 讓我們看看函數在 計算 方法中的 行為

計算

在第一次執行時,函數內部的代碼將被執行,vuejs將計數器值存儲在緩存中(以便更快地訪問)。 但是當我們再次調用函數時,vuejs將不會再次執行該函數內部編寫的代碼。 它首先檢查對計數器所做的任何更改。 如果進行了任何更改,則只會重新執行該函數內的代碼。 如果沒有對計數器進行任何更改,則vuejs將不再執行該功能。 它只會從緩存中返回先前的結果。

方法

這就像javascript中的常規方法。 每當我們調用該方法時,它將始終執行函數內部的代碼,而不管對計數器所做的更改。

無論代碼如何變化,方法都將始終重新執行代碼。 計算器將重新執行代碼的位置,只有當其中一個依賴項的值發生更改時。 否則它將在不重新執行的情況下從緩存中提供先前的結果


這是這個問題的細分。

何時使用方法

  • 對DOM中發生的某些事件做出反應
  • 在組件中發生某些事情時調用函數。
  • 您可以從計算屬性或觀察者調用方法。

何時使用計算屬性

  • 您需要從現有數據源撰寫新數據
  • 您有一個在模板中使用的變量,它是從一個或多個數據屬性構建的
  • 您希望將復雜的嵌套屬性名稱減少為更易讀且易於使用的屬性名稱(但在原始屬性更改時更新它)
  • 您需要從模板中引用一個值。 在這種情況下,創建計算屬性是最好的,因為它是緩存的。
  • 您需要偵聽多個數據屬性的更改




computed-properties