Question

想知道是否应该使用一种方法直接更新data()中一个可能较大的数组，或者让该方法在data()中设置另一个原始属性，并使用computed返回修改后的值。使用那个数组？以下两种方法的示例：

方法1：

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;
    });
  }

方法2：

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;
  }

一个比另一个更好，或者有其他建议/改进吗？谢谢！

Answer 1

您应该使用计算属性。这样，您就不必在意记住调用各种方法来保持数据同步。

您的计算属性可以根据您的要求变得更加简单。

new Vue({
  el: '#app',
  data: {
    selectedUserIndex: null,
    users: [{
        name: 'Mark',
        id: 1
      },
      {
        name: 'John',
        id: 2
      },
      {
        name: 'Evan',
        id: 3
      }
    ]
  },
  computed: {
    selectedUser() {
      return this.selectedUserIndex >= 0
        ? this.users[this.selectedUserIndex]
        : null
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>
    Selected user:
    <span v-if="selectedUser">{{selectedUser.name}}</span>
    <em v-else>No user selected</em>
  </p>

  <ul>
    <li @click="selectedUserIndex = index" v-for="(user, index) in users" :key="user.id">
      {{user.name}}
    </li>
  </ul>
</div>

Vue数据，计算和方法

1 个答案: