Свойство methods в Vue3

Vue3 选项式 APIVue3 Options API

В Vue3,methodsЭто свойство — объект, используемый для определения методов, доступных в компоненте. Эти методы можно вызывать в шаблоне компонента через привязку событий или другими способами.

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

Базовый синтаксис использования свойства methods

В компоненте Vue3,methodsЭто свойство обычноsetupопределяется вне функции. Оно содержит объект, где каждая пара ключ-значение представляет метод: ключ — это имя метода, а значение — реализация метода.

Пример

export default {
  methods: {
    methodName() {
      // Логика метода
    },
    anotherMethod() {
      // Логика другого метода
    }
  }
}

Пример: вызов метода при нажатии кнопки

Ниже приведён простой пример, показывающий, как использоватьmethodsсвойство для обработки событий клика по кнопке.

Пример

<template>
  <div>
    <button @click="handleClick">Нажми меня</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
message: 'Привет, Vue3!'
    };
  },
  methods: {
    handleClick() {
this.message = 'Кнопка была нажата!';
    }
  }
};
</script>

Анализ кода

  1. Раздел шаблона：

    • Использование@clickпривязка событийhandleClickсвязывает метод с событием клика по кнопке.
    • Когда пользователь нажимает кнопку,handleClickметод будет вызван.

  2. Раздел скрипта：

    • dataФункция возвращает объект, содержащийmessageсвойство, которое используется для хранения отображаемого сообщения.
    • methodsВ объекте определёнhandleClickметод, который изменяетmessageзначение.

Назначение свойства methods

  1. Обработка взаимодействий с пользователем：

    • methodsСвойство обычно используется для реакции на взаимодействия с пользователем, такие как клики, ввод и т. д.

  2. Выполнение логических операций：

    • В methods можно писать сложный логический код, например вычисления данных, условные проверки и т. д.

  3. Запуск поведения компонентов：

    • С помощью вызовов методов можно запускать такое поведение, как обновление состояния компонента и запросы данных.

Различия между methods и computed

  • methods：

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

  • вычислено：

    • Он будет пересчитываться только при изменении зависимых данных.
    • Подходит для сценариев, в которых результаты нужно динамически вычислять на основе данных.

Упражнение

  1. Попробуйтеmethodsдобавить новый метод для очисткиmessageсодержимого.
  2. Измените пример кода так, чтобы при нажатии кнопки отображалось текущее время.

Vue3 选项式 APIVue3 Options API

Другие расширения