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

问题描述

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

解决方法

根据经验：计算是一个简单的 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;
        }
    }
}