Vue — популярный фреймворк JavaScript.,Используется для создания пользовательских интерфейсов. В Вю,Нам часто необходимо отслеживать изменения в данных,И выполнять соответствующие операции при изменении данных. Vue3 предоставляет функцию под названием «свойства прослушивания».,Делает мониторинг данных проще и эффективнее。Эта статья будет Подробное введение в концепцию, использование и некоторые распространенные сценарии применения мониторинга свойств в Vue3.。

Основные понятия о свойствах прослушивания

Определение атрибутов прослушивания

В Vue3,мы можем пройтиwatchфункция для создания свойств прослушивания。watchФункция принимает два параметра：Данные для мониторинга и функция обратного вызова,Функция обратного вызова автоматически срабатывает при изменении данных. Вот пример свойства прослушивания:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive, watch } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue3!'
    })

    watch(() => state.message, (newVal, oldVal) => {
      console.log(`Message changed from "${oldVal}" to "${newVal}"`)
    })

    return {
      message: state.message
    }
  }
}
</script>

В приведенном выше коде,мы используемreactiveФункция создает объект реактивного состояния.state,который содержит атрибутmessage。Затем,мы используемwatchФункциональный мониторингstate.messageизменения,И распечатывать старые и новые значения при их изменении.

Параметры конфигурации свойств прослушивания

Помимо мониторинга изменений данных,Мы также можем дополнительно контролировать поведение прослушивания с помощью параметров конфигурации.。watchТретий параметр функции — объект конфигурации.,Используется для указания дополнительных параметров. Вот пример:

<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { reactive, watch } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watch(
      () => state.count,
      (newVal, oldVal) => {
        console.log(`Count changed from "${oldVal}" to "${newVal}"`)
      },
      {
        immediate: true,
        deep: true
      }
    )

    return {
      count: state.count
    }
  }
}
</script>

В приведенном выше коде,Мы добавили объект конфигурации,Он содержит два варианта：immediateиdeep。immediateВозможность указать, следует ли выполнять функцию обратного вызова сразу после начала прослушивания.,По умолчаниюfalse；deepВозможность указать, выполнять ли глубокий мониторинг,По умолчаниюfalse。через параметры конфигурации,Мы можем более гибко контролировать поведение мониторинга.

Использование атрибутов прослушивания

Мониторинг основных типов данных

В Vue3,мы можем Мониторинг основных типов Изменения данных (например, строк, чисел, логических значений и т. д.). Ниже приведен Мониторинг основных типов Пример данных:

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    watch(message, (newVal, oldVal) => {
      console.log(`Message changed from "${oldVal}" to "${newVal}"`)
    })

    return {
      message
    }
  }
}
</script>

В приведенном выше коде,мы используемrefФункция создает реактивную переменную базового типа данных.message。Затем,мы используемwatchФункциональный мониторингmessageизменения,И распечатывать старые и новые значения при их изменении.

Прослушивание объектов и массивов

Помимо основных типов данных,У нас также есть варианты Прослушивание объектов и массивов. В Vue3,Когда мы слушаем объект или массив,По умолчанию будут отслеживаться только изменения самого объекта или массива.,без отслеживания изменений их внутренних свойств. Если вам необходимо глубоко отслеживать изменения в объектах или массивах,может бытьdeepопция установлена ​​наtrue。Ниже приведен Прослушивание объектов и Примеры массивов:

<template>
  <div>
    <input v-model="userInfo.name" />
    <ul>
      <li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const userInfo = ref({ name: 'John Doe' })
    const tasks = ref([
      { id: 1, name: 'Task 1' },
      { id: 2, name: 'Task 2' },
      { id: 3, name: 'Task 3' }
    ])

    watch(
      userInfo,
      (newVal, oldVal) => {
        console.log('User info changed:', newVal, oldVal)
      },
      { deep: true }
    )

    watch(
      tasks,
      (newVal, oldVal) => {
        console.log('Tasks changed:', newVal, oldVal)
      },
      { deep: true }
    )

    return {
      userInfo,
      tasks
    }
  }
}
</script>

В приведенном выше коде,мы используемrefФункция создает реактивный объектuserInfoи数组tasks。Затем,мы используемwatchФункциональный мониторинг它们изменения,и установивdeepВарианты:trueДля достижения глубокого мониторинга。

Сценарии применения для мониторинга свойств

Проверка формы и обработка данных

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

<template>
  <div>
    <input v-model="username" />
    <p v-if="isUsernameInvalid">Invalid username!</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const username = ref('')
    const isUsernameInvalid = ref(false)

    watch(username, (newVal) => {
      // Perform validation logic
      if (newVal.length < 4 || newVal.length > 16) {
        isUsernameInvalid.value = true
      } else {
        isUsernameInvalid.value = false
      }
    })

    return {
      username,
      isUsernameInvalid
    }
  }
}
</script>

В приведенном выше коде,мы используемrefФункция создает реактивную строковую переменную.usernameи布尔值变量isUsernameInvalid。Затем,мы используемwatchФункциональный мониторингusernameизменения,и проверить на основе длины имени пользователя. Если длина имени пользователя меньше 4 или больше 16,Затем установитеisUsernameInvalidдляtrue,否Затем установитедляfalse。в шаблоне,мы основываемся наisUsernameInvalidзначение для отображения соответствующего сообщения об ошибке。

Асинхронные запросы и обработка побочных эффектов

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

<template>
  <div>
    <button @click="loadData">Load Data</button>
    <p v-for="item in data" :key="item.id">{{ item.name }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  setup() {
    const data = ref([])

    const loadData = async () => {
      const response = await fetch('https://api.example.com/data')
      const result = await response.json()
      data.value= result
    }

    watch(data, () => {
      // Perform side effect on data change
      console.log('Data changed:', data.value)
    })

    return {
      data,
      loadData
    }
  }
}
</script>

В приведенном выше коде,мы используемrefФункция создает адаптивный массивdata,Используется для хранения данных, возвращаемых асинхронными запросами. Затем,Мы определилиloadDataфункция,该функция会触发异步请求并将返回的数据赋值给data。проходитьwatchфункция,мы слушаемdataизменения,и выполнять обработку побочных эффектов при изменении данных,Например, вывести данные на консоль.

Подвести итог

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