Почему ref здесь не реактивен?

Question

[Петр Сергеев]

Ссылка на код https://codesandbox.io/s/shy-flower-wgoshe?file=/s...

В файле app при нажатии на "добавить текст" запускается action vuex который добавляет в массив новый объект, а после этого по таймеру через 3 секунды после добавления, удаляет этот объект

Данный массив из store, в компоненте HelloWorld распечатывается в шаблоне двумя способами:
1. Получает данные store и через ref в шаблоне выводит через цикл (слева)
2. Получает данные store и через computed в шаблоне выводит через цикл (справа)

Как результат можно увидеть, что через ref объект не реактивен и по факту из шаблона не удаляется, а тот, который выводится через computed - успешно стерается

Я что-то завис и не могу понять почему в случае с ref визуально объекты все еще присутствуют и состояние не обновляется, а через computed все хорошо?

Answer 1

[0xD34F]

Не выдумывайте, всё реактивно. Просто вы заменяете массив в хранилище (мутация remove) - после этого в хранилище у вас одни данные, а рендер вы выполняете на основе других.

Comments

[Петр Сергеев]

кажется понял, вы имеете ввиду, что в мутации remove я меняю массив у state, а в компоненте HelloWorld ref следит за изменениями в getters. А т.к. getters не меняется напрямую, то отсюда такой результат.
А computed следит за всеми связанными данными, по этому когда меняется state, а т.к. getters связан с state, то computed видит это изменение и обновляет отрисовку массива.

Или я все ранво не правильно понимаю?

[0xD34F]

ref следит за изменениями в getters

Петр Сергеев, ни за чем не следит.

[Петр Сергеев]

0xD34F, тогда что-то я не понимаю- если ref реактивен в него мы передаем данные из гетера, эти данные лежат по ссылке. Тогда получается что при изменении геттера должны и измениться данные в ref, точнее он должен сослаться на измененные данные, которые в геттере. Где я туплю?

[0xD34F]

получается что при изменении геттера должны и измениться данные в ref

Петр Сергеев, не получается. Попробуйте проследить, откуда вы это взяли, и обнаружите, что вы себе это просто нафантазировали. Что вы в ref положили, то там и будет лежать, ничего само собой не изменится.

Давайте упростим вашу ситуацию:

let a = [ 1 ];        // это данные в хранилище
let b = a;            // а это ваш ref
console.log(b[0]);    // выполняем рендер
a = [ 2 ];            // дёргаем мутацию
console.log(b[0]);    // выполняем рендер ещё раз

[Петр Сергеев]

0xD34F, понял. получается, что единственный способ вынести all из геттера в переменную в setup, это использовать computed?

[0xD34F]

Петр Сергеев, можно в мутации заменить фильтрацию и присваивание на findIndex + splice. Тогда массив в хранилище будет оставаться тем же и данные в ref будут актуальны. Непонятно только, зачем так делать.

[Петр Сергеев]

0xD34F, больше спасибо. Уже не раз помогаете мне понять определенные моменты во vue. Вы мой герой, хочу быть таким же умным как вы)