В этой статье мы возьмем глубокое погружение в одну из основных концепций в Vue.js – Наблюдатели Отказ
Мы начнем с нуля и посмотрим, какие наблюдатели, а затем мы пойдем дальше, чтобы посмотреть на два свойства, доступных в наблюдении: Глубоко и обработчик Отказ
Мы закончим урок, создав простой проект, в котором мы подключимся к конечной точке API и привлечь данные к нашей веб-странице. Конечно, мы будем использовать Наблюдатели чтобы сделать работу.
Давайте начнем
Откройте свой текстовый редактор к коду вместе. Я буду использовать код Visual Studio. Давайте начнем со следующей HTML Markup. Тогда, Голова здесь, чтобы получить CDN Vue.js
Я включил VUE.JS CDN в проекте. Чтобы проверить, если все работает нормально, я добавил свойство под названием Msg в данные объект и выводил его на доме. Теперь перейдите в свой браузер, вы должны увидеть Привет Тимоти напечатано на веб-странице.
Понимание наблюдателей
В дополнение к данные Объект, экземпляр VUE принимает другие свойства, такие как Методы , Вычисленные свойства , смотреть , Фильтры и крючки жизненного цикла, такие как монтируется Отказ
Как подразумевает название, наблюдатели Смотреть Для изменения значения свойства, которое мы уже определили в нашем объекте данных, и делает что-то всякий раз, когда значение этого свойства изменяется. Они также могут наблюдать за изменениями стоимости вычисленного свойства и сделать что-то всякий раз, когда значение изменяется.
Давайте посмотрим, как это работает
Я добавил кнопку до DOM и приложил метод к нему называется Чандамам который выполняется всякий раз, когда кнопка нажата. Под кнопкой есть пустой диван, который имеет реф атрибут со значением Имя Отказ Ref Атрибут будет использоваться для доступа к этому Div внутри экземпляра Vuue вместо использования традиционных методов JavaScript, таких как GetElementById Отказ
Как вы можете видеть, когда кнопка нажала, Имя изменения с Тимоти Окообох к Джули Петерсон
Следующая вещь, которую мы сделаем, это смотреть Для этого изменения и сделайте что-то случиться всякий раз, когда ценность Имя изменения.
Так что здесь происходит? Мы добавили Смотреть объект к экземпляру VUE. Тогда мы дали ему свойство под названием Имя что происходит как функция. В этой функции мы слушали изменения в стоимости Имя Свойство определено внутри данные объект. Когда происходит изменение, мы устанавливаем innerhtml div, который имеет Ref Значение Имя Отказ
Есть одна главная вещь, которую вы Должен сделать заметку о. Имя Собственность в Смотреть Объект должен быть назван Имя и ничего больше. Почему? Вы можете спросить. Ну, это потому, что мы наблюдаем за изменения в ценности название . Если бы у нас было Email Собственность в данные Объект и хотел посмотреть за это, то мы позвонили бы наблюдателя электронное письмо и ничего больше.
Кроме того, наблюдатель принимает два параметра, первый – это Новое значение имущества мы смотрим. Второй параметр – старое значение имущества мы смотрим.
Понимание метода обработчика
В нашем коде выше, наблюдатель Имя был объявлен как функция. Но это действительно может быть объявлено как объект. При объявлении в качестве объекта наблюдатель может принимать три свойства а именно Функция обработчика и два логиях Глубоко и немедленный . Ради этой статьи мы сосредоточимся на функции обработчика и глубокой.
Как вы можете видеть в коде выше, обработчик Функция в основном содержит логику, которая должна быть выполнена всякий раз, когда значение свойства, которое мы наблюдаем за изменениями.
Перейдите к вашему браузеру, вы все равно должны увидеть, что код работает как раньше.
Как насчет глубокого? Если вы понимаете Глубоко Тогда ваше знание наблюдателей будет на новом уровне.
В основном вы используете Глубоко При наблюдении за изменениями стоимости элементов внутри массива или изменения значения свойств внутри объекта. Вам нужно будет установить Глубоко к правда Для того, чтобы сообщить Vue.js, чтобы осмотреть содержимое массивов и объектов.
Давайте посмотрим, как это работает
Прежде чем я объясню, что происходит, давайте посмотрим экземпляр Vue.
У нас есть массив под названием фрукты . Затем мы принимаем значение ввода пользователя и используем его, чтобы заменить первый элемент в массиве. Затем мы наблюдаем за это изменение и попытайтесь сделать «Первый фрукт изменился» домо
Как вы можете видеть, мы успешно изменили значение первого элемента в массиве Но действие внутри наблюдателя не удалось выполнить Отказ Это может быть решено путем настройки Глубоко к истинный как так
Теперь, если вы просматриваете его в вашем браузере, вы увидите, что Vue.js теперь может осмотреть наш массив и выполнить действие, указанное в нашем наблюдении.
Наконец, давайте построим простой проект
Мы собираемся подключиться к Да/нет API. То, как он будет работать, так это то, что наши пользователи вводит вопрос внутри входного поля. Тогда мы будем Смотреть Для изменений в значении поля ввода и отправить Получить Запрос на конечную точку API. Затем мы будем отображать результат на веб-странице. Но перед отправкой запроса мы выполним простую проверку – мы проверим, будет ли вопрос пользователя заканчивается вопросительным знаком.
Достаточно разговоров. Давайте посмотрим, как это работает.
Мы будем использовать Axios Для отправки HTTP-запроса. Голова здесь, чтобы получить CDN Axios
Это шаблон разметки
Это объект данных
Это метод, который отправит Получить запрос**
Тогда это наше Наблюдатель
Наше Наблюдатель Сначала проверяет запрос пользователя, чтобы проверить, заканчивается ли его вопросительным знаком. Если проверка проходит, он называет getresult метод через 5 секунд.
Спасибо за чтение Отказ Я надеюсь, что вы что-то узнали. Пожалуйста, оставьте свои комментарии/вопросы ниже.
Оригинал: “https://dev.to/timothyokooboh/understanding-watchers-in-vue-js-mki”