Как обновить computed vue js

Правильный способ заставить Vue перендерить компонент

Эта публикация является любительским переводом статьи «The correct way to force Vue to re-render a component» от Майкла Тиссена.

Иногда бывает так, что реактивности Vue не хватает, и вам нужно перерендерить компонент. Или вам нужно сбросить DOM и начать сначала.

Так как же правильным образом заставить Vue перерендерить компонент?

Ответ прост. Правильный путь — использовать :key в компоненте. Когда вам нужно перерендерить компонент, вы просто меняете значение ключа и Vue обновит компонент.

Довольно просто, не так ли? Есть также и другие способы:

• Худший вариант: обновить всю страницу,
• Плохой вариант: использовать v-if хак,
• Чуть лучше: использовать встроенный в Vue метод forceUpdate ,
• Лучший вариант: использовать изменение ключа.

Обратите внимание! Если вы столкнулись с ситуацией, в которой вам нужно перерендерить компонент, вероятно, есть более правильный способ решить задачу. Скорее всего, вы не до конца разобрались с чем-то из этого: 1. Реактивность Vue, 2. Computed-свойства, 3. Watch-свойства, 4. Не используете :key атрибут для v-for .

А теперь рассмотрим доступные способы перерендерить компонент. Почти все из них заменяемы на вариант с изменением ключа, он рассмотрен в самом конце статьи.

Худший вариант: перезагрузить все страницу

Этот способ — примерно то же самое, что перезагрузка компьютера каждый раз, когда вы хотите закрыть какое-нибудь приложение. Звучит странно, правда?

Полагаю, это и правда может когда-то вам помочь. Однако это ужасное решение, поэтому не используйте его. Совсем.

Лучше посмотрите, что вы можете использовать ещё.

Плохой вариант: использовать v-if хак

Vue содержит директиву v-if, которая позволяет рендерить компонент или часть компонента только тогда, когда условие возвращает истину. Если в условии ложь, то всё что внутри не отрендерится и не будет существовать в DOM.

Давайте посмотрим, как это выглядит на практике.

Добавьте v-if в ваш шаблон:

В секции script добавьте метод, который использует функцию nextTick :

Вот что происходит в этом коде:

1. Сначала renderComponent установлено в true, поэтому компонент my-component рендерится
2. Когда мы вызываем forceRerender , мы сразу устанавливаем renderComponent в false
3. Мы прекращаем рендеринг my-component , потому что v-if директива содержит ложь
4. На следующем шаге ( nextTick ) мы возвращаем renderComponent в true
5. Теперь v-if содержит истину, поэтому мы снова рендерим компонент my-component

В этом примере есть два важных момента, которые важны для понимания того, как это работает. Первое — мы должны дождаться nextTick, иначе мы не увидим никаких изменений.

В Vue tick (тик) — это один цикл обновления DOM. Vue собирает все обновления в одном тике, и в конце этого тика обновляет то, что отображается в DOM в процессе этих обновлений. Если мы не дождёмся следующего тика, то наши изменения свойства renderComponent перезапишут сами себя и ничего не изменится. Поэтому мы используем nextTick .

Второе, Vue создаст совершенно новый компонент, когда мы отрендерим его второй раз. Vue уничтожит первый компонент и создаст новый. Это значит, что наш новый my-component пройдёт все хуки жизненного цикла компонента — created , mounted

Кстати, вы можете использовать nextTick с промисами:

forceRerender() < // Удаляем компонент из DOM this.renderComponent = false; // Если предпочитаете промисы, можете использовать их так this.$nextTick().then(() =>< // Возвращаем компонент обратно this.renderComponent = true; >); >

Тем не менее, это не очень хорошее решение. Скорее, это хак. Поэтому давайте посмотрим, что ещё мы можем использовать.

Способ получше: можно использовать forceUpdate

Это один из двух способов, который отлично решает проблему. При этом, он официально поддерживается Vue и не является хаком или чем-то подобным.

Обычно Vue реагирует на изменения в зависимостях, обновляя представление. Однако, когда вы запускаете forceUpdate, вы можете принудительно запустить обновление представления, даже если зависимости никак не изменились.

И вот здесь большинство людей делает множество серьёзных ошибок.

Если Vue автоматически обновляет всё когда что-то меняется, то зачем нам самим заставлять его что-то обновлять?

Причина в том, что иногда реактивность Vue может сбивать с толку. Мы думаем, что Vue отреагирует на изменения свойства или переменной, но этого не происходит. Есть также определённые ситуации, когда реактивность Vue вообще не распознаёт ваши изменения.

Стоит отметить, что forceUpdate всё же не лучший способ решения задачи. Используйте его аккуратно.

There are two different ways that you can call forceUpdate , on the component instance itself as well as globally:

// Глобально import Vue from 'vue'; Vue.forceUpdate(); // Внутри вашего компонента export default < methods: < methodThatForcesUpdate() < // . this.$forceUpdate(); // Заметьте, что мы используем $ в качестве префикса // . >> >

Важно: этот способ не обновляет computed-свойства. Вызов forceUpdate только заставляет шаблон перерендерится.

Лучший способ: изменение ключа

Что за ключ? Сейчас во всё разберёмся. Вообще, существует много ситуаций, когда перерендеринг может действительно вам потребоваться.

Для того, чтобы сделать это надлежащим образом, мы свяжем наш компонент с атрибутом key . Так Vue свяжет компонент с отдельным куском данных. И если ключ при изменениях останется прежним, то Vue не обновит компонент, а вот если ключ поменяется — Vue избавится от старого компонент и создаст новый. То, что нам нужно!

Давайте сперва пробежимся по тому, что такое key и почему нам нужно его использовать.

Зачем нужен атрибут key в Vue?

Давайте представим, что вы рендерите список компонентов, у которых есть одно или несколько из этих свойств:

• У компонента есть локальный стейт,
• У компонента есть логика инициализации: что-то, что использует mounted или created хуки,
• Не реактивные DOM-манипуляции: обычно это jQuery-решения или стандартные JS API.

Если вы отсортируете этот список или обновите его каким-либо образом, вам нужно будет повторно отрендерить все части этого списка. Вряд вы захотите перерендерить вообще все элементы этого списка, лучше затронуть лишь то, что изменилось.

Для помощи Vue в отслеживании таких изменений мы внедряем атрибут key. Использование индекса массива тут не поможет, поскольку индекс не привязан к конкретным объектам в нашем списке.

Here is an example list that we have:

const people = [ < name: 'Ваня', age: 34 >, < name: 'Марина', age: 25 >, < name: 'Николай', age: 51 >, ];

Если мы отрендерим список с использованием индексов, то получим это:

Если мы удалим Марину, то получим:

Ваня - 0 Николай - 1

Индекс, который был связан с Николаем изменился, хотя Николай всё ещё Николай. При этом, Николай перерендерится, хотя мы этого не хотели.

В нашей ситуации подойдёт какой-то уникальный ID, давайте добавим его.

Когда мы удаляли Марину из нашего списка, Vue удалил компоненты для Марины и Николая, а затем создал новый компонент для Николая. Теперь, когда Vue знает ID, он сохранит два компонента Вани и Николая, и удалит лишь компонент Марины.

Если мы добавим ещё кого-то в список, то Vue знает, что может сохранить текущие компоненты и просто создать один дополнительный. Это действительно полезно, когда у вас есть более сложные компоненты с логикой, собственным состоянием, имеют логику инициализации или выполняют какие-то манипуляции с DOM.

А теперь давайте продолжим с лучшим методом для принудительного повторного рендеринга компонентов в Vue.

Смена ключа для принудительного повторного рендеринга компонента

Наконец-то, лучший способ принудительного повторного рендеринга компонента (по мнению автора, конечно же).

Вы применяете эту стратегию назначения ключей дочерним элементам, но каждый раз, когда вы хотите повторно отрендерить компонент, вы просто обновляете ключ.

Вот простой пример того, как это работает:

Каждый раз, когда мы в компоненте вызываем forceRerender , наш пропс componentKey изменяется. Это в свою очередь приводит к тому, что Vue узнаёт когда нужно уничтожить инстанс компонента и создать новый.

В результате вы получаете дочерний компонент, который способен сам себя переинициализировать и сбросить своё состояние. Простой и элегантный способ решения проблемы.

И помните, что если вы столкнулись с ситуацией, когда вам нужно принудительно перерендерить компонент, то вероятно вы делаете что-то не лучшим образом. Если всё же вам нужно как-то перерендерить компонент, то выбирайте способ с привязкой ключа.

Дополнение от переводчика

Стоит упомянуть отдельно Vuex и связанную с ним реактивность. Дело в том, что если у вас в глобальном сторе хранится сложный объект или многомерный массив, то Vue не сможет отслеживать изменения в них, если делать это неправильно. В документации Vue, в описании реактивности, есть информация о том, как работать со сложными объектами и массивами, чтобы достичь реактивности.

Как обновить computed vue js

Кроме обычных свойств объект Vue может содержать вычисляемые свойства, который во многом аналогичны функциям, но в то же время отличаются от них. Рассмотрим небольшой пример:

      
  
Имя: > Возраст >
 
>
 
     

Здесь в зависимости от возраста пользователя функция checkAge возвращает некоторый результат. И при каждом изменении значения свойства age, функция checkAge будет пересчитывать свой результат. Однако минусом подобного подхода является то, что метод checkAge будет выполняться при изменении любого свойства во Vue, в том числе свойства name, которое с методом checkAge никак не связано. Это мы можем увидеть по консольному выводу из метода checkAge при изменении свойства name:

Более оптимальным в данном случае будет использование вычисляемых свойств, которые определяются с помощью параметра computed :

      
  
Имя: > Возраст >
 
>
 
>
 
     

Здесь enabled представляет вычисляемое свойство. Его определение во многом аналогично методу checkAge. Но теперь при изменении состояния Vue будут анализироваться сделанные изменения, и если потребуется, то свойство enabled будет повторно вычисляться. Поэтому в данном случае, если мы изменим свойство age, изменится свойство enabled и повторно выполнится функция checkAge. Но если изменится свойство name, то свойство enabled не будет изменяться:

Сеттеры

Вычисляемое свойство можно разделить на сеттер и геттер. Геттер возвращает значение, а сеттер устанавливает. По умолчанию свойство имеет только геттер — во всех примерах выше вычисляемое свойство представляет функцию, которая возвращает некоторое значение. Теперь определим и геттер, и сеттер:

 
   
Имя: >
 
   

На уровне кода геттер задается через параметр get , который представляет функцию, возвращающую значение. А сеттер представляет функцию, задаваемую через параметр set . Причем каждое новое значение передается через параметр этой функции (в примере выше параметр newValue). И так как в данном случае вычисляемое свойство представляет объединение простых свойств firstname и lastname, то сеттере мы можем получить по отдельности значения этих свойств после изменения свойства fullname.

Vue: Computed — вычисляемые свойства

Условно, используемые данные во Vue можно разделить на 3 части:

• переданные входные параметры ( props )
• объявленные в компоненте данные ( data )
• вычисляемые свойства ( computed )

И если первые два подразумевают “статичность” (присвоенное значение останется неизменным, до присвоения нового), то вычисляемые свойства автоматически рассчитывают своё значение.

Частая область их применения — красивое отображение данных для пользователя. Это может быть вывод даты в подробном формате или форматирование текста, выбор одного из варианта по условию.

Сама идея отслеживания изменений думаю перенята у Angular. Подобное там можно реализовать с помощью watch’еров, которые реагируют на произошедшие изменения. К сожалению, при увеличении их числа начинает медленнее выполняться цикл дайждеста — что приводило к “ощущениям” тормозов приложения.

Вкратце, вычисляемые свойства…

• должны зависеть от data, props или других вычисляемых свойств;
• собирают зависимости и знают наверняка, при изменении каких данных необходим перерасчёт;
• являются ленивыми, т.е. рассчитываются только при обращении к ним, а не при каждом изменении зависимых данных;
• обязательно должны возвращать новое значение;
• не могут иметь параметров (доступ к всему только через this )
• допускают использование в логике вычислений методов, объявленных в компоненте, и различные библиотеки (например, lodash, underscore). Асинхронность не допускается, но в статье будет описано несколько вариантов решения этой проблемы.

Вычисляемые свойства vs. watch

Vue предоставляет два варианта отслеживания данных:

• вычисляемые свойства (computed)
• методы наблюдатели (watch).

Не стоит всё отслеживание реализовывать на основе методов-наблюдателей. Многое лучше делать с использованием вычисляемых свойств, используя все их преимущества.

Watch стоит использовать при “дорогих” операциях вычислений, а также для реализации асинхронных операций. Другим применением, может быть вызов дополнительной логики (например, для статистики).

Вычисляемые свойства vs. методы

Похожий результат можно получать и воспользовавшись методами для форматирования или преобразования данных. В чём разница?

Метод необходимо каждый раз явно вызвать для получения нового значения, а его результат никак не кешируется (ну или ещё придётся реализовывать мемоизацию).

Вычисляемые свойства автоматически отслеживают все свои зависимости и запускают перерасчёт только при их изменениях, кешируя результат.

Кеширование

Благодаря кешированию значений, не нужно переживать по поводу использования других вычисляемых свойств — никакого каскадного перерасчёта не будет. Каждое свойство “знает” свои зависимости и пересчитывается только при их изменениях, остальные вернут закешированное значение.

Вычисляемые свойства для выноса логики из шаблона

Допустим есть шаблон, в котором хочется вывести имя пользователя в верхнем регистре, а также сколько прошло времени со дня рождения:

В шаблоне, который предназначен для определения структуры элемента теперь присутствует логика. По возможности, следует стараться этого избегать, меньше будет путаницы и чище код.

А что будет если потребуются сложные вычисления? Кроме того, что шаблон ещё сильнее распухнет, сам синтаксис шаблонов допускает использование внутри фигурных скобок только одного выражения. Тернарный оператор ещё допустим, но логика сложнее — нет.

Исправить пример дело пары минут — добавляем свойство computed и описываем в объекте все вычисляемые свойства, которые по сути являются просто функциями, возвращающими новое значение:

// переданные в компонент имя пользователя и дата рождения
props: name: String, 
birtday: String
>,computed: title: function() return 'Пользователь: ' + this.name.toUpperCase(); 
>, 
timeago: function() return moment(this.birthday).fromNow(); 
>
>

Не используйте стрелочные функции при определении вычисляемых свойств, иначе this внутри них не будет указывать на экземпляр Vue! Но краткую запись метода использовать можно:

computed: title: () => < // return 'Пользователь: ' + this.name.toUpperCase(); 
>, 
timeago() < // return moment(this.birthday).fromNow(); 
>
>

В шаблоне вычисляемые свойства можно использовать как обычные:

Вычисляемые свойства для различных “флагов”

Это конечно уже зависит от вкусовых предпочтений каждого, но я стараюсь по максимуму выносить логику из шаблона.

Например, чтобы выводить сообщение об отсутствии элементов в массиве можно сделать так:

В массиве ничего нет!

Всё-таки в массиве что-то есть

И это полностью рабочий вариант. А можно сделать вычисляемое свойство для флага и использовать уже его:

В массиве ничего нет!

Всё-таки в массиве что-то есть

В массиве ничего нет!

Всё-таки в массиве что-то есть

Никакой логики в шаблоне, читается лучше, а при необходимости эти вычисляемые свойства можно использовать и в других сравнениях.

Вычисляемые свойства как замена фильтров

Во Vue 1.х можно было использовать фильтры в выражениях шаблона:

В релизе Vue.js 2 фильтры были удалены, а их функционал было предложено перенести в вычисляемые свойства для более явного разделения логики от разметки:

С версии Vue 2.1.0 вновь стало возможным использовать фильтры, но только внутри mustache-шаблонов.

Вычисляемые свойства для манипуляции массивами

По аналогии с предыдущим примером можно легко манипулировать элементами массива: фильтровать или сортировать.

Это пригодится, когда нет возможности получать с сервера данные сразу в нужном формате/порядке. С помощью вычисляемого свойства исправить это очень просто:

computed: sortedItems() return this.items .sort(function (a, b) if (a.name > b.name) return 1; 
> 
if (a.name < b.name) return -1; 
> 
return 0; 
>); 
>
>

И теперь вместо items достаточно просто обращаться к sortedItems .

Вычисляемые свойства для добавления динамичности

Может пригодиться для реализации настраиваемых компонентов. Например, когда описание элемента может быть расположено в разных свойствах объекта. Для этого достаточно передать название свойства, и на их основе создать вычисляемое свойство:

title () return this.element[this.titleProp];
>

Сеттеры вычисляемых свойств

Наверное редкий случай, когда это может пригодиться (по крайней мере мне ещё ни разу не приходилось воспользоваться), но есть возможность настроить вычисляемое свойство не только на чтение, но и реализовать логику на запись:

computed: fullName: // геттер вызывается при чтении из вычисляемого свойства 
get: function () return this.firstName + ' ' + this.lastName 
>, 
// сеттер вызывается при записи в вычисляемое свойство значения 
set: function (newValue) var names = newValue.split(' '); 
this.firstName = names[0]; 
this.lastName = names[names.length - 1]; 
> 
>
>

Теперь запись this.fullName = ‘Иван Иванов’ вычисляемого свойства вызовет сеттер, и this.firstName и this.lastName будут соответствующим образом обновлены.

Вычисляемые свойства и нереактивные данные

Предположим, что нам хочется иметь переменную, содержащую актуальное значение размера экрана браузера. И кажется, достаточно лишь создать вычисляемое свойство, которое будет возвращать к примеру значение window.innerWidth .

Но при изменении размеров окна браузера значение остаётся тем же. Почему это не сработало? Потому что вычисляемые свойства отслеживают изменения только реактивных данных (data или props).

Что же делать в таком случае? Можно добиться “реактивности” несколько другим способом. При инициализации Vue добавить переменную и записать в неё какое-то стартовое значение (или пустое). Теперь есть реактивная переменная и стартовое состояние:

data: function () return windowWidth: window.innerWidth 
>;
>

Как же поддерживать эту переменную в актуальном состоянии? Для этого в mounted хуке добавим обработчик события изменения размера экрана, а в коллбэке сохраним новое значение в нашу переменную:

mounted () window.onresize = (event) => this. windowWidth = window.innerWidth; 
>;
>

В итоге у нас будет “реактивная” переменная с актуальным значением размера окна, которую можно использовать в других вычисляемых свойствах.

Вычисляемые свойства + асинхронность

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

Есть другой вариант — воспользоваться плагином vue-async-computed:

Вычисляемые свойства и слежение

Встраиваемые в шаблоны выражения удобны, но могут предназначаться только для простых операций. При усложнении логики их труднее поддерживать:

div id="example"> 
{{ message.split('').reverse().join('') }} 
div> 

Такой шаблон уже не выглядит простым и декларативным. С первого взгляда и не скажешь, что он всего лишь отображает message задом наперёд. Ситуация станет ещё хуже, если эту логику потребуется использовать в нескольких местах шаблона.

На помощь здесь приходят вычисляемые свойства.

Простой пример

div id="example"> 
p>Изначальное сообщение: «{{ message }}» p> 
p>Сообщение задом наперёд: «{{ reversedMessage }}» p> 
div> 

var vm = new Vue({ 
el: '#example', 
data: { 
message: 'Привет' 
}, 
computed: { 
// геттер вычисляемого значения 
reversedMessage: function ( ) { 
// `this` указывает на экземпляр vm 
return this.message.split('').reverse().join('') 
} 
}
})

Мы определили вычисляемое свойство reversedMessage . Написанная нами функция будет использоваться как геттер свойства vm.reversedMessage :

console.log(vm.reversedMessage) // => 'тевирП'
vm.message = 'Пока'
console.log(vm.reversedMessage) // => 'акоП' 

Вы можете открыть консоль и поиграть с примером самостоятельно. Значение vm.reversedMessage всегда зависит от значения vm.message .

В шаблонах можно обращаться к вычисляемым свойствам как и к обычным. Vue знает, что vm.reversedMessage зависит от vm.message , поэтому при обновлении vm.message обновятся и все зависящие от него элементы, в нашем случае обновится vm.reversedMessage . Самое важное — эту зависимость теперь мы указали декларативно: геттер вычисляемого свойства не имеет побочных эффектов, что упрощает понимание кода и его тестирование.

Кэширование вычисляемых свойств

Можно заметить, что такого же результата можно достичь и с помощью метода:

p>Сообщение задом наперёд: «{{ reverseMessage() }}» p> 

// в компоненте
methods: { 
reverseMessage: function ( ) { 
return this.message.split('').reverse().join('') 
}
}

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

Обратите внимание, что следующее вычисляемое свойство никогда не обновится, поскольку Date.now() не является реактивной зависимостью:

computed: { 
now: function ( ) { 
return Date.now() 
}
}

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

Зачем нужно кэширование? Представьте, есть «дорогое» вычисляемое свойство A, требующее цикла по огромному массиву и выполняющее множество вычислений. И пусть ещё будут другие вычисляемые свойства, в свою очередь, зависящие от A. Без кэширования геттер A будет запускаться куда чаще необходимого! В тех же случаях, когда кэширования нужно избежать — используйте методы.

Вычисляемые свойства и слежение

Vue предоставляет и более общий способ наблюдения и реагирования на изменения данных в экземпляре: слежение за свойствами. Когда есть данные, которые необходимо обновлять при изменении других данных, возникает соблазн избыточно использовать только этот подход, особенно если привыкли к Angular. Но, как правило, лучше использовать вычисляемые свойства, а не императивный коллбэк в watch . Рассмотрим пример:

div id="demo">{{ fullName }} div> 

var vm = new Vue({ 
el: '#demo', 
data: { 
firstName: 'Foo', 
lastName: 'Bar', 
fullName: 'Foo Bar' 
}, 
watch: { 
firstName: function (val) { 
this.fullName = val + ' ' + this.lastName 
}, 
lastName: function (val) { 
this.fullName = this.firstName + ' ' + val 
} 
}
})

Код выше — императивный и избыточный. Сравните с версией с использованием вычисляемого свойства:

var vm = new Vue({ 
el: '#demo', 
data: { 
firstName: 'Foo', 
lastName: 'Bar' 
}, 
computed: { 
fullName: function ( ) { 
return this.firstName + ' ' + this.lastName 
} 
}
})

Так гораздо лучше, не правда ли?

Сеттеры вычисляемых свойств

По умолчанию вычисляемые свойства работают только на чтение, но при необходимости можно также указать и сеттер:

// . 
computed: { 
fullName: { 
// геттер: 
get: function ( ) { 
return this.firstName + ' ' + this.lastName 
}, 
// сеттер: 
set: function (newValue) { 
var names = newValue.split(' ') 
this.firstName = names[0] 
this.lastName = names[names.length - 1] 
} 
}
}
// . 

Теперь запись vm.fullName = ‘Иван Иванов’ вызовет сеттер, и vm.firstName и vm.lastName будут соответствующим образом обновлены.

Методы-наблюдатели

Хотя в большинстве случаев лучше использовать вычисляемые свойства, иногда необходимы пользовательские методы-наблюдатели. Поэтому Vue предоставляет более общий способ реагирования на изменения в данных через опцию watch . Эта возможность полезна для «дорогих» или асинхронных операций, выполняемых в ответ на изменение данных.

div id="watch-example"> 
p> 
Задайте вопрос, на который можно ответить «да» или «нет»: 
input v-model="question"> 
p> 
p>{{ answer }} p> 
div> 

 
 
 
 
script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"> script>
script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"> script>
script> 
var watchExampleVM = new Vue({
 el: '#watch-example',
 data: {
 question: '',
 answer: 'Пока вы не зададите вопрос, я не могу ответить!'
 },
 watch: {
 // эта функция запускается при любом изменении вопроса
 question: function (newQuestion, oldQuestion) {
 this.answer = 'Ожидаю, когда вы закончите печатать. '
 this.debouncedGetAnswer()
 }
 },
 created: function ( ) {
 // _.debounce — это функция lodash, позволяющая ограничить то,
 // насколько часто может выполняться определённая операция.
 // В данном случае мы ограничиваем частоту обращений к yesno.wtf/api,
 // дожидаясь завершения печати вопроса перед отправкой ajax-запроса.
 // Узнать больше о функции _.debounce (и её родственнице _.throttle),
 // можно в документации: https://lodash.com/docs#debounce
 this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
 },
 methods: {
 getAnswer: function ( ) {
 if (this.question.indexOf('?') === -1) {
 this.answer = 'Вопросы обычно заканчиваются вопросительным знаком. ;-)'
 return
 }
 this.answer = 'Думаю. '
 var vm = this
 axios.get('https://yesno.wtf/api')
 .then(function (response) {
 vm.answer = _.capitalize(response.data.answer)
 })
 .catch(function (error) {
 vm.answer = 'Ошибка! Не могу связаться с API. ' + error
 })
 }
 }
}) 
script> 

Задайте вопрос, на который можно ответить «да» или «нет»:

В данном случае использование опции watch позволило выполнять асинхронную операцию (обращение к API), ограничивать частоту выполнения этой операции и устанавливать промежуточные состояния до получения ответа от сервера. Ничего из этого не удалось бы достичь с помощью вычисляемых свойств.

Кроме опции watch можно также использовать vm.$watch в императивном стиле.

Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .