Vue.js Vue数据、计算数据和方法

想知道是否应该使用方法直接更新

data（）

中可能较大的数组，或者让该方法在

data（）

中设置另一个基元属性，并使用

computed

返回使用该属性更改的数组？这两种方法的示例如下：

方法1：

方法2：

---

一个比另一个好还是有其他建议/改进？谢谢

您应该使用计算属性。这样，您就不需要关心如何记住调用各种方法来保持数据同步

根据您的需求，您的计算属性可以变得更简单一些

newvue({
el:“#应用程序”，
数据：{
selectedUserIndex:null，
用户：[{
姓名：'马克'，
身份证号码：1
},
{
姓名：'约翰'，
身份证号码：2
},
{
姓名：“Evan”，
身份证号码：3
}
]
},
计算：{
selectedUser（）{
返回此值。selectedUserIndex>=0
？this.users[this.selectedUserIndex]
：null
}
}
})

所选用户：
{{selectedUser.name}
未选择任何用户



{{user.name}

您应该使用计算属性。这样，您就不需要关心如何记住调用各种方法来保持数据同步

根据您的需求，您的计算属性可以变得更简单一些

newvue({
el:“#应用程序”，
数据：{
selectedUserIndex:null，
用户：[{
姓名：'马克'，
身份证号码：1
},
{
姓名：'约翰'，
身份证号码：2
},
{
姓名：“Evan”，
身份证号码：3
}
]
},
计算：{
selectedUser（）{
返回此值。selectedUserIndex>=0
？this.users[this.selectedUserIndex]
：null
}
}
})

所选用户：
{{selectedUser.name}
未选择任何用户



{{user.name}

根据您的代码，一次只能选择一个用户，但我看到

usersSelected（）。哪一个是正确的？计算属性通常是正确的方法，因为您不需要担心手动重新计算值。@YongQuan-
usersSelected（）
是一个糟糕的名称选择，但我不能称之为
users（）
，因为这将与
data（）中的
用户发生命名冲突
在Vue中。也许应该把它叫做
usersComputed（）
。那么整组中只能有一个选中了
的用户：true
是真的吗？@YongQuan-是的，但这个细节与我无关-只是想知道使用computed是否更好。根据你的代码，一次只能有一个选中的用户，但我看到
usersSelected（）
其中“users”是复数，它与您的代码相矛盾。哪一个是正确的？计算属性通常是正确的方法，因为您不需要担心手动重新计算值。@YongQuan-
usersSelected（）
是一个糟糕的名称选择，但我不能称之为
users（）
，因为这将与
data（）中的
用户发生命名冲突
在Vue中。也许应该把它叫做
usersComputed（）
。那么整组中只能有一个用户选择了
：true
，但这一细节与我无关——我只是想知道使用computed是否更好。需要将所有用户传递到第三方组件，因此我必须在数组中的所有对象上定义所选属性，但我接受你的答案。听起来这是可以避免的。如果需要更新答案，请告诉我。需要将所有用户传递到第三方组件，因此我必须在数组中的所有对象上定义所选属性，但我会接受您的答案。听起来这是可以避免的。如果我需要更新我的答案，请告诉我。
data() {
  return {
    users: [
      {
        name: 'alice'
        selected: true
      },
        name: 'bob'
        selected: false
// ...
methods: {
  handleSelection(selectedIndex) {
    this.users = this.users.map((item, index) => {
      item.selected = selectedIndex === index ? true : false;
      return item;
    });
  }

data() {
  return {
    selectedIndex: 0,
    users: [
      {
        name: 'alice'
        selected: true
      },
        name: 'bob'
        selected: false
// ...
computed: {
  usersSelected() {
    return this.users.map((item, index) => {
      item.selected = this.selectedIndex === index ? true : false;
      return item;
    });
  }
//...
methods: {
  handleSelection(selectedIndex) {
    this.selectedIndex = selectedIndex;
  }