Вычисленные свойства
В Синтаксисе шаблона мы обсудили усы и привязки необработанного HTML. Вы, наверное, заметили, что свойства, к которым мы привязываемся, взяты из свойства data, которое мы передаем конструктору Vue. Обычно эти свойства представляют собой строки, которые используются после объединения, замены, регулярного выражения и т. Д.
Возьмем для примера concat. У нас есть 3 объекта в data. Это мычание, гав и мяуканье.
И мы хотим отображать «Привет, я Дэвид» каждый раз, когда приветствуем пользователей. Это могло произойти несколько раз на одной странице. Придется ли нам вычислять снова каждый раз, когда он используется?
В этом случае стоимость игнорируется. Но если это довольно большие затраты на память и процессорное время, вы все равно будете с этим согласны? Так что нам определенно нужен другой способ получить эти вычисленные значения.
По другой причине, не кажется ли вам странным читать этот сложный код, встроенный в усы?
Итак, вот вычисленное свойство.
Вычисленное свойство
Примечание. приведенные выше коды взяты с страницы документации Vue.js с изменениями.
копия на самом деле является вычисляемым свойством. Обратите внимание, что это свойство функции, определенное в разделе вычислено из данных.
Если вы используете инструмент отладки, чтобы погрузиться в сценарий (используя typeof для просмотра типа вычисляемого свойства), вы обнаружите каждый раз, когда message меняет свое значение и тип (от строки к числу) тип копии немедленно изменяется. Супер круто, да?
Таким образом, ваш эффективный код становится намного лучше, а код теперь более читабельным.
Подожди. У нас есть еще одно свидетельство, подтверждающее, что Vue просто вычислил копию, как только вы изменили сообщение. Добавьте одну строку в console.log («catcha»); перед возвращаемым значением в вычисляемом свойстве copy. Запустите страницу и попробуйте несколько раз изменить сообщение в отладчике. Вы это видите? Вы получили результат еще до того, как использовали свойство copy!
Вычисленное кеширование против методов
Есть еще один способ заставить все работать - методы. Методы больше похожи на способ сделать код читабельным, чем на улучшение производительности. Почему? Потому что методы выполняются каждый раз при вызове функции.
В официальном документе Vue говорится, что вычисляемые свойства основаны на кэше. Другими словами, каждое свойство зависимости изменяется, вычисляемые свойства обновляются. И только зависимые свойства будут запускать этот процесс обновления.
Вы можете назвать это связанной реакцией. На одной стороне ссылки происходит изменение данных (свойства), и ссылка уведомляет все стороны об изменении «ваших» зависимых данных. Таким образом, все связанные вычислительные свойства вычисляются заново. Этот процесс Vue называет кешированием.
Вычисленное и наблюдаемое свойство
Как видите, вычислительные свойства - это зависимости, которыми управляет экземпляр Vue. А методы - это агрессивные вычислительные функции, определяемые разработчиками. Но есть еще один способ управлять свойствами данных, чувствительными к зависимостям, - это наблюдаемое свойство.
Наблюдаемая собственность позволяет разработчикам участвовать в наблюдении за недвижимостью и последующих процедурах.
Внимание. Несмотря на то, что у вас появился более мощный способ управления зависимостями, вы все равно должны быть осторожны, выбирая правильный способ. При этом следует учитывать как скорость, так и производительность.
Компьютерный сеттер
Это просто обратный процесс функции get вычисляемого свойства, которая является вызовом по умолчанию.
Если вам нравится мой контент, пожалуйста, хлопайте в ладоши и подписывайтесь на меня. Ознакомьтесь с моими оригинальными материалами на devchache.com.
