Прочитав это, вы заметите, что это руководство полностью предназначено для разработчиков, которые понимают функциональность наблюдателей и ее отличия от других ловушек, таких как методы, создано, установлено, вычислено и многие другие.
Часто возникает желание выполнять операции в ответ на изменение данных. Vue предоставляет ловушку watch, с помощью которой можно реагировать на изменения любого свойства, хранящегося во Vue. Например,
<script> export default { data() { return { department: '' } }, created() { this.fetchStaff(); }, watch: { department: { handler: function () { this.fetchStaff(); } } }, methods: { fetchStaff() { // fetch staff here } } } </script>
Из этого туториала Вы узнаете, как реорганизовать обработчики часов, сделав компоненты проще и чище, с помощью более умных наблюдателей.
Сначала давайте посмотрим, что происходит в приведенном выше фрагменте, и мы должны согласиться, что это действительно потрясающая закономерность:
- Хук created вызывает метод fetchStaff () при создании компонента. Альтернативой этому может быть вызов метода, когда компонент монтируется в подключенном ' крюк.
- Свойство Watcher «отдел» в обработчике наблюдения наблюдает за свойством отдела и вызывает метод fetchStaff () всякий раз, когда оно изменяется. Это полезно, когда вам нужно отфильтровать список сотрудников по отделам.
- Все в порядке? Конечно, хук 'methods' - это то место, где мы размещаем все наши методы, и с помощью axios или vue-resource вы можете сделать вызов api к конечной точке, которая получит список сотрудников и установит состояние в вашем компоненте.
Многие любят более тонкие строчки кода, без дублирования, я имею в виду…
watch: { department: { handler: function () { this.fetchStaff(); } } },
к этому …
watch: { department: 'fetchStaff' },
Поскольку наблюдатели могут принимать имена методов, мы можем с уверенностью делать то же самое, что и позже. Мы можем добавить столько свойств часов в ловушку «watch», и при этом она будет выглядеть проще и аккуратнее. Если вы согласны со мной, то я уверен, что в конце вы будете хлопать в ладоши.
Чтобы сделать его еще более интересным, мы можем наблюдать за нашим свойством (отделом) при создании, не вызывая наш метод с помощью хука «created». Смотри на меня..
Из этого …
created() { this.fetchStaff(); }, watch: { department: { handler: function () { this.fetchStaff(); } } },
К этому ..
watch: { department: { handler: 'fetchStaff', immediate: true } },
Это означает, что, добавив i mmediate: true к нашему свойству-наблюдателю, он может вызывать себя при создании.
export default { data() { return { department: '' } }, watch: { department: { handler: 'fetchStaff', immediate: true } }, methods: { fetchStaff() { // fetch users here } } }
Это уменьшает дублирование, и окончательный код становится проще и чище.
Это было просто для развлечения.