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

Posted 2023-02-22

【中文标题】在 Vue js 中我应该在哪里使用计算和方法？ （需要适当的指导）

【英文标题】：Where should I use computed and methods in Vue js? (need proper guideline)

【发布时间】：2021-03-29 09:04:55

【问题描述】：

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

【问题讨论】：

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

【参考方案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;