方法与 Vue 中的计算

javascript vue.js vuejs2 methods computed-properties

2022-08-30 00:21:33

在 Vue 中，a 和值之间的主要区别是什么.js？methodscomputed

它们看起来相同且可互换。

答案 1

计算值和方法在 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 的文档非常好，很容易访问。我推荐它。

答案 2

由于@gleenk要求提供一个实际示例来明确方法和计算属性之间的缓存和依赖项差异，我将展示一个简单的场景：

应用程序.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 个计算属性。方法 & 和计算属性 & 都向或添加 +20（即值）。关于这些方法，每次对任何列出的属性执行操作时，都会调用它们，即使一个特定方法的依赖项未更改也是如此。对于计算的属性，仅当依赖项发生更改时才执行代码。例如，引用 A 或 B 的特定属性值之一将分别触发或。addToAmethodaddToBmethodaddToAcomputedaddToBcomputedageabaddToAcomputedaddToBcomputed

方法和计算的描述似乎非常相似，但是正如@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”按钮时，调用了所有方法（请参阅上面的控制台日志屏幕结果），也执行了，但我没有按“添加到B”按钮;引用 B 的属性值未更改。如果我们决定单击“添加到B”按钮，则会出现相同的行为，因为这两种方法都将独立于依赖项更改进行调用。根据此方案，这是不好的做法，因为我们每次都执行这些方法，即使依赖项未更改也是如此。这实际上是资源消耗，因为没有未更改的属性值的缓存。addToBmethod()

method button method

计算属性案例演示

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”按钮时，仅调用计算属性，因为如前所述，仅当依赖项发生更改时，才会执行计算属性。由于我没有按“添加到B”按钮，并且B的年龄属性值没有变化，因此没有理由调用并执行计算属性。因此，从某种意义上说，计算属性保持B属性的“相同不变”值，就像一种缓存一样。在这种情况下，这被认为是好的做法。addToAcomputedaddToBcomputed

computed button computed