На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Урок 9. Свойства computed и watch в Vue


На этом уроке из серии уроков по Vue 3 для начинающих мы немного подробнее разберем свойство computed (мы знакомились с ним уже на этом уроке) и узнаем об watch.

computed Vue 3

Начнем с computed. Уровень такой же, как и у data и methods. Всегда должны что-то возвращать и вычислять. При этом будут задействованы тогда и только тогда, когда действительно нужны. Своего рода оптимизация.

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

Приведем пример. Верстка:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Основы Vue с upread.ru</title>
</head>
<body>
	<div id="app">
        <input type="text" v-model="upValue" />
		Квадрат: {{ squareVal }}
      </div>
	</div>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="app.js"></script>
</body>
</html>
Файл app.js:

const App = {
  data() {
    return {
      upValue: '',
	  square: ''
    }
  },
  computed: {
    squareVal() {
      return this.upValue * this.upValue
    },
  }
}

Vue.createApp(App).mount('#app')
В этом примере вы вычисляем квадрат введенного числа и выводим его.

watch Vue 3

Чтобы следить за переменными (их изменением) в Vue 3 есть специальное свойство под названием watch. Для примера, давайте создадим переменную upValue и свойство watch с таким же названием. Метод upValue будет принимать value в качестве аргумента. А что он будет выводить?

HTML разметка:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Основы Vue с upread.ru</title>
</head>
<body>
	<div id="app">
        <input type="text" v-model="upValue" />
      </div>
	</div>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="app.js"></script>
</body>
</html>
Файл app.js:

const App = {
	data() {
		return {
			upValue: '',
		}
	},
	watch: {
		upValue(value) {
			console.log(value)
		}
    }
}

Vue.createApp(App).mount('#app')
Теперь, если вы что-то пишите в текстбоксе и этим изменяете переменную upValue, то её значение выводится на консоль. Это как бы обработчик события изменения переменной получается. Или слушатель.



Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.



тегистатьи IT, Уроки по Vue, Vue, computed, watch

Читайте также:




Делаю программы на заказ
Урок 3. Числовые типы данных в C#


© upread.ru 2013-2021
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.