Для тех, кто начинает изучать Vue, есть небольшая путаница в отношении разницы между методами, вычисляемыми свойствами и наблюдателями.
Хотя обычно вы можете использовать каждый из них для достижения более или менее одного и того же, важно понимать, в чем каждый из них превосходит другие.
В этом кратком совете мы узнаем об этих трех важных аспектах приложений Vue и вариантах их использования. Мы сделаем это, создав один и тот же компонент поиска, используя каждый из этих трех методов.
MethodsВ методе более-менее то, что и следовало ожидать — функция свойства объекта. Вы можете использовать методы для реагирования на события, происходящие в DOM, или вызывать их из других частей компонента, например, из вычисляемых свойств или наблюдателей. Методы используются для группировки общих функций — например, для обработки отправки форм или создания повторно используемых функций, таких как выполнение запросов Ajax.
Создайте метод внутри объекта методов в экземпляре Vue:
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>
Как видите, мы имеем в виду метод handlesearch, который вызывается каждый раз, когда пользователь вводит текст в поле поиска. Нам нужно создать методы и данные:
new 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 обновляет перечисленный элемент значением поля ввода. Следует отметить, что в объекте методов вам не нужно использовать this.handlesearch для ссылки на метод (как вы должны делать в реакции)
Computed Properties
Хотя поиск в приведенном выше примере работает так, как ожидалось, более элегантным решением является использование вычисляемого свойства. Вычисляемые свойства очень удобны для составления новых данных из существующих источников, и одно из их больших преимуществ перед методами заключается в том, что они кэшируют выходные данные. Это означает, что если что-то независимое от вычисляемого свойства изменяется на странице, и пользовательский интерфейс повторно отображается, возвращается кэшированный результат, а вычисляемое вычисляемое свойство не вычисляется повторно, что позволяет избежать потенциально дорогостоящей операции.
Вычисляемые свойства позволяют нам выполнять мгновенные вычисления, используя имеющиеся у нас данные. В этом примере у нас есть массив элементов, которые необходимо отсортировать. Мы хотим сортировать, когда пользователь вводит значение в поле ввода.
Наш шаблон выглядит почти так же, как в предыдущей итерации, за исключением того, что мы передаем директиве v-for вычисляемое свойство (filteredlist):
<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 filteredList" class="list-group">
<li class="list-group-item" :key="item">{{ item }}</li>
</ul>
</div>
Сценарная часть немного отличается. Язык мы объявили в свойстве data (раньше это был пустой массив), вместо метода перенесли логику в вычисляемое свойство:
new Vue({
el: "#app",
data() {
return {
input: '',
languages: [
"JavaScript",
"Ruby",
"Scala",
"Python",
"Java",
"Kotlin",
"Elixir"
]
}
},
computed: {
filteredList() {
return this.languages.filter((item) => {
return item.toLowerCase().includes(this.input.toLowerCase())
})
}
}
})
Вычисляемое свойство filteredList будет содержать массив элементов, содержащих значения полей ввода. При первом рендеринге (когда поле ввода пусто) будет рендериться весь массив. Когда пользователь вводит значение в поле, filteredList вернет массив, содержащий значения, введенные в поле.
При использовании вычисляемых свойств должны быть доступны вычисляемые данные, иначе приложение не будет работать.
Вычисляемое свойство создает новое свойство filteredlist, поэтому мы можем ссылаться на него в шаблоне. Каждый раз, когда зависимость делает это, значение filteredlist изменяется. Легко изменяемые зависимости здесь являются входными значениями.
Наконец, обратите внимание, что вычисляемые свойства позволяют нам создавать в шаблоне переменную, построенную на основе одного или нескольких свойств данных. Типичным примером является создание полного имени из имени и фамилии пользователя следующим образом:
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
В шаблоне можно сделать ФИО. Всякий раз, когда значение имени или фамилии изменяется, значение полного имени будет меняться.
WatchersНаблюдатели полезны, когда вы хотите выполнять действия в ответ на произошедшие изменения (например, свойства или свойства данных). Как упоминается в документации Vue, это наиболее полезно, когда вы хотите выполнять асинхронные или дорогостоящие операции в ответ на изменение данных.
В примере поиска мы можем вернуться к примеру метода и установить наблюдатель для свойства входных данных. Затем мы можем реагировать на любые изменения входного значения.
Во-первых, давайте восстановим шаблон для использования атрибута языковых данных:
<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>
Тогда наш экземпляр Vue будет выглядеть так:
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
}
}
})
Здесь я задаю наблюдателю объект (а не функцию). Это сделано для того, чтобы я мог указать непосредственное свойство, которое вызовет срабатывание наблюдателя, как только компонент будет смонтирован. Это приводит к заполнению списка. Затем функция для запуска находится в свойстве обработчика.
Суммировать:Как говорится, с большой силой приходит и большая ответственность. Vue дает вам сверхвозможности, необходимые для создания отличных приложений. Знание того, когда их использовать, является ключом к созданию контента, который понравится пользователям. Методы, вычисляемые свойства и наблюдатели — вот некоторые из суперспособностей, доступных вам. Идите вперед и обязательно используйте их с пользой!
Оригинальный адрес:woohoo.sitepoint.com/he-differen-e…Добавить описание ссылки