Прочитав это, вы заметите, что это руководство полностью предназначено для разработчиков, которые понимают функциональность наблюдателей и ее отличия от других ловушек, таких как методы, создано, установлено, вычислено и многие другие.

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

<script>
    export default {
        data() {
            return {
                department: ''
            }
        },

        created() {
            this.fetchStaff();
        },

        watch: {
            department: {
                handler: function () {
                    this.fetchStaff();
                }
            }
        },

        methods: {
            fetchStaff() {
                // fetch staff here
            }
        }
    }
</script>

Из этого туториала Вы узнаете, как реорганизовать обработчики часов, сделав компоненты проще и чище, с помощью более умных наблюдателей.

Сначала давайте посмотрим, что происходит в приведенном выше фрагменте, и мы должны согласиться, что это действительно потрясающая закономерность:

  1. Хук created вызывает метод fetchStaff () при создании компонента. Альтернативой этому может быть вызов метода, когда компонент монтируется в подключенном ' крюк.
  2. Свойство Watcher «отдел» в обработчике наблюдения наблюдает за свойством отдела и вызывает метод fetchStaff () всякий раз, когда оно изменяется. Это полезно, когда вам нужно отфильтровать список сотрудников по отделам.
  3. Все в порядке? Конечно, хук '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
        }
    }
}

Это уменьшает дублирование, и окончательный код становится проще и чище.

Это было просто для развлечения.