Существует не так много вещей которые бы расстраивали программиста, более чем вынужденное изучения сложного блока кода. При работе с VueJS одним из наиболее распространенных способов загромоздить код является добавление в шаблон очень длинных выражений. Например, допустим, мы хотим реверсивно отобразить строку без пробелов и со всеми заглавными буквами. Если бы мы делали это, используя выражение в шаблоне, это выглядело бы так.
<span> {{text.replace(‘ ‘, ‘’).reverse().toUpperCase()}} </span>
Теперь представьте, что вам нужно использовать подобный код в нескольких местах шаблона. Шаблон быстро станет трудно понимаемым для быстрого чтения кода. К счастью во VueJS есть вычисляемые свойства (computed).
Теперь, когда мы знаем, чем вычисляемые свойства полезны, давайте рассмотрим, как их использовать. В общем случае, мы просто добавляем computed к нашему экспорту. Для приведенного выше примера это будет выглядеть так.
export default { data () { text: ‘hello world’ }, computed { formattedText: function () { return this.text.replace(‘ ‘, ‘’).reverse().toUpperCase() } } }
Теперь, когда мы определили новый метод в computed, его очень легко отобразить в шаблоне. Все, что нам нужно сделать.
<span> {{ formattedText }} </span>
Использование вычисляемых свойств всегда делает проект более масштабируемым, потому что если мы захотим изменить отображаемое значение, нам нужно будет только изменить вычисляемое свойство вместо того, чтобы проходить и изменять каждое выражение во всем шаблоне.
В нашем примере formattedText всегда будет зависеть от значения текста. Так что если мы изменим текст на «ABCDEF», то formattedText вернет «FEDCBA». Однако для более эффективной работы VueJS кэширует вычисленные значения свойств. VueJS будет пересчитывать свойство только при изменении зависимости. В нашем случае он будет пересчитываться только при изменении текста. В противном случае он вернет кэшированное значение из последнего изменения.
Чтобы полностью понять, когда вычисленные свойства изменятся, мы должны понять идею их зависимостей. Проще говоря, зависимости вычисляемого свойства — это значения, которые помогают свойству определять возвращаемое значение. Если ни одна из зависимостей не изменится, то будет возвращено кэшированное значение.
Если никакая зависимость не изменяется, вычисляемое свойство не пересчитывается.
В следующем примере из документации VueJS показано вычисленное свойство, которое никогда не будет пересчитываться.
computed: { now: function () { return new Date() } }
Хотя вычисляемое свойство теперь возвращает значение, которое постоянно меняется, нет никаких зависимостей, за которыми может следит VueJS. Поэтому оно никогда не пересчитывается.
Если вам это не нравится, вы всегда можете использовать обычный метод VueJS, который по умолчанию пересчитывается при каждом рендере.
По умолчанию вычисляемые свойства доступны только для чтения. Однако, если вы хотите добавить хук для вычисляемого свойства, которое позволит установить его зависимости, все что вам нужно сделать, это следующее.
computed: { formattedText: function () { get: function () { return this.text.replace(‘ ‘, ‘’).reverse().toUpperCase() }, set: function (value) { this.text = value; } } }
Как вычисляемые свойства, так и наблюдатели (watchers) могут обновлять значения на основе данных. Хотя все вычисляемые свойства могут быть записаны с использованием наблюдателей (watchers), часто более читабельно и эффективно использовать вычисляемое свойство. Возьмите следующий пример, сначала написанный через наблюдатель (watchers), а затем как вычисляемое свойство.
export { data () { return { name: ‘Matt’, age: 19, output: ‘’ } }, watch: { name: function (val) { this.output = this.name + ‘ is ‘ + this.age + ‘ years old.’ }, age: function (val) { this.output = this.name + ‘ is ‘ + this.age + ‘ years old.’ } } } // Now as a computed property export { data () { return { name: ‘Matt’, age: 19 } }, computed: { nameAndAge: function () { return this.name + ‘ is ‘ + this.age + ‘ years old.’ } } }
Как вы можете видеть, вычисляемое свойство намного проще и менее избыточно, но при этом обеспечивает такую же скорость отклика при изменении данных.
Если вы ранее не были знакомы с вычисляемыми свойствами, надеюсь, данная статья поможет вам понять зачем они нужны. А после их освоения, писать более элегантный, читабельный и легкий для понимания код.
Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…
Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…
Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…
Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…
Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…
Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…