Урок 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

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

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

Программирование up

Мои услуги