Vue 数据、计算和方法

Question

想知道我是否应该使用方法直接更新data() 中可能较大的数组，或者让该方法在data() 中设置另一个原始属性并使用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;
    });
  }

方法 #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>