在 Vue js 中我应该在哪里使用计算和方法？（需要适当的指导）答案

【问题标题】：Where should I use computed and methods in Vue js? (need proper guideline)在 Vue js 中我应该在哪里使用计算和方法？（需要适当的指导）
【发布时间】：2021-03-29 09:04:55
【问题描述】：

看看下面的图片，请解释我应该在哪里使用computed 而不是methods，反之亦然？这让我很困惑。

【问题讨论】：

这能回答你的问题吗？ Method vs Computed in Vue

标签： vue.js methods vuex mutation

【解决方案1】：

根据经验：computed 是一个依赖于一个或多个属性的简单 getter（尽管它们可以是 setter，但这不是您通常会使用的东西）。当这些属性发生变化时，它会自动更新。你不能传递它的参数。当您需要传递参数和/或需要执行操作或突变时，您将使用方法。

data() {
    firstName: 'Bert',
    lastName: 'Ernie'
},
computed: {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

这将返回“Bert Ernie”并在firstName 或lastName 更改时自动更新。

现在，如果您需要更改某些内容，或者例如使用参数从列表中选择某些内容，您将使用方法。

data() {
    users: [
        { id: 1, name: 'Bert' }.
        { id: 2, name: 'Ernie' }
    ]
},
methods: {
    getUser(userid) {
        return this.users.find(user => user.id === userid);
    },
    setUserName(userid, newName) {
        const user = this.users.find(user => user.id === userid);
        if (user) {
            user.name = newName;
        }
    }
}

【讨论】：