问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue 中的方法与计算

社区维基
1
新手上路，请多包涵

Vue.js 中的 method 和 computed 值之间的主要区别是什么？

在我看来，它们是相同的并且可以互换。

原文由 Bootstrap4 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptmethodsvue.jsvuejs2computed-properties
阅读 495
2 个回答
得票最新
社区维基
1
✓ 已被采纳

Vue 中的计算值和方法非常不同，并且在大多数情况下绝对不能互换。

计算属性

计算值更合适的名称是 计算属性。事实上，当 Vue 被实例化时，计算属性会被转换为 Vue 的属性，其中包含一个 getter，有时还有一个 setter。基本上，您可以将计算值视为派生值，只要用于计算它的基础值之一被更新，它就会自动更新。你不 调用 计算，它不接受任何参数。就像引用数据属性一样引用计算属性。这是 文档 中的经典示例：

 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 的 文档 非常好并且易于访问。我推荐它。

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

正如@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 个计算属性来执行相同的任务。 The methods addToAmethod & addToBmethod and the computed properties addToAcomputed & addToBcomputed all add +20 (ie the 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” 按钮，则会出现相同的行为，因为这两种方法都将独立于依赖项更改而被调用。根据这种情况，这是 不好的做法，因为我们每次都在执行方法，即使依赖项没有改变。这真的很消耗资源，因为没有缓存未更改的属性值。

方法按钮方法

计算属性案例演示

 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 属性维护“相同不变”的值，就像一种缓存一样。在这种情况下，这是一种 很好的做法。

计算的按钮计算

原文由 Giulio Bambini 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题