javascript vue用法 方法vs在Vue中計算




vue用法 (4)

計算值和方法在Vue中是非常不同的,並且在大多數情況下絕對不可互換。

計算財產

計算值的更合適的名稱是vuejs.org/v2/guide/computed.html#Computed-Properties 。 事實上,當Vue被實例化時,計算屬性將被轉換為具有getter且有時是setter的Vue的屬性。 基本上,您可以將計算值視為派生值,只要更新用於計算它的其中一個基礎值,它就會自動更新。 您不調用計算機,它不接受任何參數。 您可以像引用數據屬性一樣引用計算屬性。 這是documentation的經典示例:

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

Vue的documentation非常好,易於訪問。 我推薦它。

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

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


來自docs

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

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


計算屬性

計算屬性也稱為計算值。 這意味著,他們可以隨時更新並進行更改。 此外,它還會緩存數據,直到更改為止。 實例化Vue時,計算屬性將轉換為屬性。

還有一件事我想分享,你不能在計算屬性中傳遞任何參數,這就是為什麼在調用任何計算機屬性時不需要括號。

方法

方法與功能相同,工作方式相同。 此外,除非您調用它,否則方法無效。 此外,與所有javascript函數一樣,它接受參數,並在每次調用時重新進行評估。 之後,他們無法緩存值

在方法中,調用括號就在那裡,您可以在其中發送一個或多個參數。


由於@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已經指定它, 它們不是一回事 ! 現在讓我們嘗試添加一些html來一起執行所有內容,看看差異在哪裡:

index.html(方法)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VueJS  example</title>
        <link href="style.css" rel="stylesheet" />
        <script src="https://unpkg.com/vue"></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 = {{ addToAmethod() }}</p>
            <p>Age + B = {{ addToBmethod() }}</p>
        </div>
    </body>

    <script src="app.js"></script>
</html>

結果

當我點擊“添加到A”按鈕時,所有方法都被調用(參見上面的控制台日誌屏幕結果), addToBmethod()也被執行但我沒有按下“添加到B”按鈕; 引用B的屬性值沒有改變。 如果我們決定單擊“添加到B”按鈕,則會出現相同的行為,因為這兩個方法將再次獨立於依賴項更改進行調用。 根據這種情況,這是不好的做法,因為我們每次都在執行方法,即使依賴關係沒有改變。 這實際上是資源消耗,因為沒有用於未更改的屬性值的緩存。

index.html(用於計算屬性)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VueJS  example</title>
        <link href="style.css" rel="stylesheet" />
        <script src="https://unpkg.com/vue"></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屬性的“相同的未更改”值,就像一種緩存一樣。 在這種情況下,這是一種良好的做法







computed-properties