Данные Vue, вычисленные и методы

#vue.js

Вопрос:

Интересно, должен ли я напрямую обновлять потенциально большой массив при 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;
  }

Один лучше другого или какие-либо дополнительные предложения / улучшения? Спасибо!

1. Исходя из вашего кода, одновременно может быть только 1 выбранный пользователь, но я вижу usersSelected() , где «пользователи» во множественном числе, и это противоречит вашему коду. Какой из них правильный?

2. Вычисляемое свойство обычно является правильным подходом здесь, поскольку вам не нужно беспокоиться о пересчете значения вручную.

3. @YongQuan — usersSelected() был неудачным выбором имени, но я не могу его назвать, users() поскольку это было бы конфликтом именования с users from data() в Vue. Возможно, следовало вызвать это usersComputed() .

4. Так правда ли, что во всем наборе может быть только 1 пользователь selected: true ?

5. @YongQuan — Да, но эта деталь для меня не имеет значения — просто хочу знать, лучше ли использовать computed или нет.

Ответ №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>

1. Необходимо передать всех пользователей в сторонний компонент, поэтому мне нужно определить выбранное свойство для всех объектов в массиве, но я приму ваш ответ.

2. Похоже, этого можно избежать. Дайте мне знать, если мне нужно обновить свой ответ.