Как вызвать событие изменения данных на поле, значение которого не изменилось?
У меня есть компонент chart (график), в котором в реалтайме выводятся данные с сервера. Данные - это просто поле value, за которым выставлено наблюдение через опцию watch. Если изменение произошло, то value кладется в массив chartData, после чего этот массив проецируется на график.
Проблема в том, что в value за последние N секунд могут последовательно прийти одинаковые значения, и тогда реактивность не сработает, т.к. vue не сможет задетектить изменение value. В итоге, на графике не отобразится прямая за последние N секунд.
Можно ли как-то вызвать реактивность явно?
Есть идея отказаться от watch на value и использовать для этого уникальное поле (timestamp ответа, например), но из-за плохого знания vue, у меня нет уверенности, что timestamp и value будут обновляться одновременно.
Ответы (1 шт):
Если у вас подключение по реалтайму происходит через веб-сокеты, что логично, то watch вам совсем не нужен. У WebSocket есть слушатель, который срабатывает при получении сообщения. Вот в нем и обрабатывайте полученные данные — добавляйте в массив. А массив используйте для данных графика. Не забудьте про computed.
Пример работы сокетов:
https://learn.javascript.ru/websocket
// получение сообщения - отобразить данные в div#messages
socket.onmessage = function(event) {
let message = event.data;
let messageElem = document.createElement('div');
messageElem.textContent = message;
document.getElementById('messages').prepend(messageElem);
}
Если вы каждые N секунд шлете обычный get запрос на сервер, то прямо в этом методе сделайте аналогичную обработку – пуште данные в массив, а данные из массива получайте через computed.
https://ru.vuejs.org/v2/guide/computed.html