Узнайте о наблюдателях Vue.js для улучшения разработки веб-приложений

Ключевые выводы

• Фреймворки JavaScript, такие как Vue, предлагают такие функции, как архитектура компонентов, управление состоянием и маршрутизация, для упрощения разработки веб-приложений.
• Наблюдатели Vue — это функции, которые отслеживают изменения реактивных свойств и позволяют реагировать на события и изменение данных.
• При сравнении наблюдателей с вычисляемыми свойствами вычисленные свойства становятся более краткими и простыми для чтения, что приводит к повышению производительности и упрощению отладки.

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

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

Что такое наблюдатели в Vue?

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

Чтобы использовать наблюдатель, импортируйте смотреть функция от вид пакет в вашем скрипте:

<scriptsetup>
import { watch } from 'vue';
script>

Теперь вы можете использовать функцию watch для реализации наблюдателя в вашем компоненте Vue. Вот простой пример:

<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
 user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
 alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>

Этот простой компонент использует функцию наблюдения для отслеживания изменения имени пользователя. Раздел шаблона фрагмента определяет HTML-структуру компонента, которая включает в себя п тег, отображающий значение реактивной переменной пользователя.

Шаблон также содержит элемент кнопки с Сменить имя функция прикреплен к прослушивателю событий клика. Когда пользовательская переменная изменяется, Vue запускает функцию обратного вызова. Функция обратного вызова отображает предупреждение: «Имя пользователя изменено с «Чинеду» на «Виктор».

Сравнение наблюдателей с вычисляемыми свойствами

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

Например, вы можете вычислить сумму возраста отца и сына с помощью наблюдателей следующим образом:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
 total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
 total.value = Number(newAge) + Number(son.value)
})
script>

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

Затем в фрагменте используются два смотреть Функция отслеживания возраста сына и отца. Для каждого возраста (отца или сына) фрагмент суммирует новое значение с возрастом другого. Затем он сохраняет результат в общий реактивная переменная.

Рассмотрим тот же сценарий из приведенного выше фрагмента, в котором используются вычисляемые свойства:

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
 return Number(father.value) + Number(son.value);
});
script>

Этот фрагмент по сравнению с предыдущим более краток и его легче читать. Фрагмент получает сумму возраста отца и сына и сохраняет ее в вычисляемой ссылке (переменной). общий. Затем в разделе шаблона отображается общая переменная, используя интерполяция, метод привязки данных в Vue.

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

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

немедленный option — это конфигурация, которую вы можете использовать при создании наблюдателя. Эта опция определяет, должен ли наблюдатель запускать обратный вызов сразу после того, как Vue смонтировал компонент.

Вот пример компонента, использующего наблюдатель с опцией немедленного действия:

<scriptsetup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
 count,
 (newCount, oldCount) => {
 console.log(`Count changed from ${oldCount} to ${newCount}`);
 },
 { immediate: true }
);
script>

В приведенном выше фрагменте наблюдатель выполнит обратный вызов сразу после инициализации компонента и выведет на консоль сообщение «Count изменен с неопределенного на 10». Это показывает, что исходная переменная была неопределенной до того, как Vue добавил значение 10 в счетчик ref.

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

Опция Deep доступна в Vue Watchers

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

Вот пример компонента Vue с опцией deep:

<scriptsetup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 },
 { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>

Фрагмент выше инициализирует данные ref с объектом, содержащим длина свойство. Фрагмент устанавливает опцию deep для истинный. Затем он регистрирует на консоли, что данные изменились, поскольку свойство длины изменилось на 43.

Если для параметра deep установлено значение true, функция наблюдения не заметит никаких изменений в объекте. Однако Vue отслеживает все вложенные и глубокие изменения без опции deep, когда вы инициализируете переменную данных как реактивный объект:

<scriptsetup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>

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

Создавайте лучшие приложения с помощью Vue Watchers

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

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