Основы Vue.js Часть 3 | Вычисляемое свойство

Сегодня я расскажу о вычисляемом свойстве в Vue.js. Сначала я приведу код этого учебника с сайта vuejs.org. Затем я коснусь различий между методами и вычисляемыми свойствами в Vue.js (не подробно).

Это часть 3 из моей серии «Основы Vue.js», чтобы прочитать часть 2, пожалуйста, перейдите сюда.

Вот весь код:

<script>
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },
  computed: {
    hideCompletedTodos() {
      return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(item => item.id !== todo.id)
    },
    toggleHideCompleted() {
      this.hideCompleted = !this.hideCompleted
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" />
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in hideCompletedTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="toggleHideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
.done {
  text-decoration: line-through;
}
</style>
Вход в полноэкранный режим Выход из полноэкранного режима

Пришло время прочитать код выше небольшими кусками!

export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },
Вход в полноэкранный режим Выход из полноэкранного режима

В нашем свойстве data(){} мы получили newTodo для ключевого свойства text в нашем массиве todos. hideCompleted ключ для скрытия завершенных тодо, это булево значение (true или false). Его задача — скрыть завершенные задания, если оно истинно, и показать все задания, независимо от того, завершены они или нет, если оно ложно. Наконец, у нас есть массив объектов, в котором хранятся наши тодосы. Как вы заметили, в наших объектах появился новый ключ (done:). Это нужно для того, чтобы изменить стилизацию для задач, которые уже выполнены, об этом позже.

Далее, вычисляемое свойство:

computed: {
    hideCompletedTodos() {
      return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
    }
  },
Вход в полноэкранный режим Выйти из полноэкранного режима

Функция hideCompletedTodos() возвращает нечто, основанное на булевом значении hideCompleted (true или false). Если hideCompleted равно true, она фильтрует item, у которых свойства item.done равны false. Другими словами, у нас останутся только item.done с ложными значениями, потому что item => !item.done этот код возвращает элементы, у которых значения item.done ложные. : this.todos этот код говорит, иначе (если hideCompleted не true), то возвращает массив todos вообще.

Еще немного о computed. На первый взгляд может показаться, что computed — это то же самое, что и методы, но это не так. Во-первых, computed перерисовывает только измененный элемент, с другой стороны, methods перерисовывает все. Это становится проблемой производительности. Чтобы решить эту проблему, используйте computed, свойство computed отслеживает реактивное состояние в виде зависимостей и кэширует результат. Как только зависимости изменяются, оно обновляется. Однако свойство methods обновляется, даже если результат не меняется.

Пора вернуться к нашему коду

methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter(item => item.id !== todo.id)
    }
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Функция addTodo() добавляет (фактически «проталкивает») новый объект в массив todos. Наконец, она устанавливает this.newTodo в пустую строку, так что мы не увидим [объект Object] странную вещь во вводе, когда форма (мы поговорим о ней в ближайшее время) будет отправлена.

Функция removeTodo(todo) принимает параметр — todo. Когда будет нажата кнопка ‘X’, она вызовет этот конкретный ‘todo’ ({ id: id++, text: ‘Learn HTML’, done: true }… один из этих) и отфильтрует (удалит) его. Поскольку в методе filter я задал параметр item, каждое todo будет представлено как item. Логика, стоящая за этим кодом; this.todos.filter(item => item.id !== todo.id), это сравнивает, если item.id и todo.id не одинаковы. Затем возвращаются элементы с разными id.

Что это значит? Итак, когда мы нажимаем на кнопку ‘X’, возвращается объект с ключом id. Как вы знаете, метод filter выполняет итерации над массивами. Так вот, он перебирает массив todos и возвращает item, идентификаторы которых не совпадают с todo.id, полученным из параметра item. Часть этого кода выполнена, теперь поговорим о шаблонной части.

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" />
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in hideCompletedTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>
Вход в полноэкранный режим Выход из полноэкранного режима

@submit.prevent предотвращает обновление страницы при отправке формы. Далее, у нас есть тег input, который двусторонне связан с данными newTodo. v-model: отвечает за синхронизацию данных newTodo и функции addTodo(). За пределами нашей формы у нас есть тег list.

Вот как работает v-for в теге списка:
Как вы видите, в hideCompletedTodos есть todo. Да, у нас есть массив todos, но что такое todo? Это локальная переменная, которая будет жива только в этом

  • теге, потому что она создана в нем. Это означает, что todo недоступна за пределами
  • в данном случае. Итак, у нас есть массив объектов, с помощью v-for мы перебираем объекты в массиве hideCompletedTodos. Итак, todo представляет каждый объект в массиве hideCompletedTodos. Поскольку todo является локальной переменной, мы можем назвать ее как угодно, но понятное именование является одной из лучших практик. Например, если бы у меня был массив books, я бы закодировал его как <li v-for="book in books" :key="book.id"> ... </li>.

    краткое напоминание

    hideCompletedTodos() {
          return this.hideCompleted ? this.todos.filter(item => !item.done) : this.todos
        }
    
    Войдите в полноэкранный режим Выход из полноэкранного режима

    Код выше возвращает отфильтрованный массив todos или массив todos в исходном виде, поэтому <li v-for="todo in hideCompletedTodos" :key="todo.id"> цикл v-for выглядит следующим образом. Итак, hideCompletedTodos - это либо отфильтрованный (на основе свойства объекта done) массив todos, либо нетронутый массив todos.

    <input type="checkbox" v-model="todo.done"> Чтобы понять эту часть, я поделюсь частью кода.

    <style>
    .done {
      text-decoration: line-through;
    }
    </style>
    
    Вход в полноэкранный режим Выход из полноэкранного режима

    Вкратце, код выше имеет CSS класс .done, который выводит линию через текст. Этот код v-model="todo.done" связывает свойство done в todo с CSS-классом done. Таким образом, когда в чекбоксе стоит галочка, добавляется CSS-класс .done, и через текст проходит линия.

    Как нам получить конкретный todo из списка с помощью removeTodo(todo)? Вот как:

    <li v-for="todo in hideCompletedTodos" :key="todo.id">
    <button @click="removeTodo(todo)">X</button>
    </li>
    
    Войдите в полноэкранный режим Выйти из полноэкранного режима

    Как вы можете заметить, todo является локальной переменной, которая представляет каждый объект в hideCompletedTodos ('hideCompletedTodos' возвращает фильтрованный todos или исходный массив todos, помните?). Используя метод @click, мы вызываем функцию removeTodo(todo), которая берет свой параметр из локальной переменной todo. Их имена должны совпадать, потому что локальная переменная todo является аргументом для removeTodo(todo).

    <button @click="hideCompleted = !hideCompleted">
        {{ hideCompleted ? 'Show all' : 'Hide completed' }}
      </button>
    
    Вход в полноэкранный режим Выйти из полноэкранного режима

    Приведенный выше код изменяет состояние hideCompleted. hideCompleted является булевым значением, поэтому приведенный выше код меняет его на противоположное текущему значение.

    На этом часть 3 закончена, мы поговорили о вычисляемых свойствах и разнице между вычисляемым свойством и свойством метода в Vue.js.

    Далее я рассмотрю жизненный цикл, ссылки на шаблоны и, возможно, Watchers.

  • Оцените статью
    devanswers.ru
    Добавить комментарий