Урок 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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Программы на заказ
Отзывы
Контакты