Разница между вычисленными свойствами, методами и наблюдателями в Vue

Хотите узнать Vue.js с нуля? Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 14,99 / месяц .

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

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

В этом кратком совете мы рассмотрим эти три важных аспекта приложения Vue и их варианты использования. Мы сделаем это путем создания одного и того же поискового компонента, используя каждый из этих трех подходов.

методы

Метод более или менее то, что вы ожидаете — функция, которая является свойством объекта. Вы используете методы для реагирования на события, которые происходят в DOM, или вы можете вызывать их из других частей вашего компонента, например, из вычисляемого свойства или наблюдателя. Методы используются для группировки общих функций — например, для обработки отправки формы или для создания многократно используемой функции, такой как выполнение запроса Ajax.

Вы создаете метод в экземпляре Vue внутри объекта methods

 new Vue({
  el: "#app",
  methods: {
    handleSubmit() {}
  }
})

И когда вы хотите использовать это в своем шаблоне, вы делаете что-то вроде этого:

 <div id="app">
  <button @click="handleSubmit">
    Submit
  </button>
</div>

Мы используем директиву v-on, чтобы прикрепить обработчик событий к нашему элементу DOM, который также может быть сокращен до знака @

Метод handleSubmit Для случаев, когда вы хотите передать аргумент, который понадобится в теле метода, вы можете сделать это:

 <div id="app">
  <button @click="handleSubmit(event)">
    Submit
  </button>
</div>

Здесь мы передаем объект события, который, например, позволил бы нам предотвратить действие браузера по умолчанию в случае отправки формы.

Однако, поскольку мы используем директиву для присоединения к событию, мы можем использовать модификатор для достижения того же результата более элегантно: @click.stop="handleSubmit"

Теперь давайте рассмотрим пример использования метода для фильтрации списка данных в массиве.

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

 <div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      @keyup="handleSearch"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

Как видите, мы handleSearchnew Vue({
el: '#app',
data() {
return {
input: '',
languages: []
}
},
methods: {
handleSearch() {
this.languages = [
'JavaScript',
'Ruby',
'Scala',
'Python',
'Java',
'Kotlin',
'Elixir'
].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
}
},
created() { this.handleSearch() }
})
Нам нужно создать метод и данные:

 handleSearch

 data

 filteredList

 computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

 <div id="app">
  <h2>Language Search</h2>

  <div class="form-group">
    <input
      type="text"
      v-model="input"
      placeholder="Enter language"
      class="form-control"
    />
  </div>

  <ul v-for="(item, index) in languages" class="list-group">
    <li class="list-group-item" :key="item">{{ item }}</li>
  </ul>
</div>

 new Vue({
  el: "#app",
  data() {
    return {
      input: '',
      languages: []
    }
  },
  watch: {
    input: {
      handler() {
        this.languages = [
          'JavaScript',
          'Ruby',
          'Scala',
          'Python',
          'Java',
          'Kotlin',
          'Elixir'
        ].filter(item => item.toLowerCase().includes(this.input.toLowerCase()))
      },
      immediate: true
    }
  }
})