Изчислени свойства и проследяване

Изчислени свойства

Изразите, вградени в шаблони, са удобни, но могат да се използват само за прости операции. Тъй като логиката се усложнява, те са по-трудни за поддържане:

Този модел вече не изглежда прост и декларативен. На пръв поглед не можете да разберете, че той просто показва съобщение назад. Ситуацията ще се влоши още повече, ако тази логика трябва да се използва на няколко места в шаблона.

Елате на помощ тук изчислени свойства.

Един прост пример

Дефинирахме изчисленото свойство reversedMessage. Функцията, която сме написали, ще се използва като гетер за свойството vm.reversedMessage:

Можете да отворите конзолата и да си поиграете сами с примера. Стойността vm.reversedMessage винаги зависи от стойността vm.message .

В шаблоните можете да получите достъп до изчислени свойства точно като нормалните. Vue знае, че vm.reversedMessage зависи от vm.message, така че когато vm.message се актуализира, всички елементи, които зависят от него, ще бъдат актуализирани, в нашия случай vm.reversedMessage ще бъдат актуализирани. Най-важното е, че сега сме посочили тази зависимост декларативно: гетерът на изчислено свойство няма странични ефекти, което прави кода по-лесен за разбиране и тестване.

Кеширане на изчислено свойство

Можете да видите, че същият резултат може да бъде постигнат с помощта на метода:

Вместо изчислено свойство, можете да използвате същата функция като метод. По отношение на крайния резултат и двата подхода правят едно и също нещо. Но има важна разлика: изчислените свойства се кешират въз основа на техните реактивни зависимости. Изчисленото свойство се преизчислява само когато една от неговите реактивни зависимости се промени. Следователно, докато съобщението остава непроменено, многократните повиквания към reversedMessage ще връщат изчислената стойност всеки път, без да стартират функцията отново.

---