Разъяснение о системе реактивности Vue

Question

Я всегда хотел задать следующие вопросы относительно системы реактивности Vue.

Я прочитал в Vue docs, что рекомендуется хранить данные компонентов в виде простых объектов JS, а не объектов класса. То же самое касается отдельных свойств компонентов данных.

Почему эта рекомендация? В чем проблема с данными как экземплярами объектов класса? Какие крайние случаи вызваны использованием методов получения / установки и методов внутри данных компонента? (это мой главный вопрос здесь)

У меня есть еще один вопрос о системе реактивности Vue.

Могу ли я напрямую изменять вычисляемые компонентами методы получения / установки и методы во время выполнения без проблем с Vue Reactivity System? Измененные вычисленные получатели / установщики все еще кэшируются и оптимизируются? Измененные методы будут доступны из шаблона компонента? Могу ли я добавить новые вычисленные методы получения / установки и методы во время выполнения? Как?

Большое спасибо!

Answer 1

Система реактивности Vue (но я полагаю, что я могу распространить ее на все другие реактивные рамки / lib / что угодно) - это просто реализация шаблона наблюдателя . В конкретном случае функция наблюдателя запускается при изменении значения свойства (данные, вычисленный результат получения, состояние vuex). если свойство является целым числом и его значение равно 2, легко проверить, что в какой-то момент оно стало «3», после сравнения с мутацией , vdom change и т.д ... и то же самое для других примитивных типов. Когда структурированный объект вступает в игру, сравнение между значениями все еще выполняется, но на этот раз значение будет ссылкой на объект. Если ссылка не меняется, vue не может знать, что что-то изменилось, поэтому просто не реагирует ....

если вы установите val [3] = 'foo' до и val [3] = 'bar' после, массив 'val' останется тем же объектом в той же области кучи, поэтому вы должны его клонировать, или лучше используйте Vue.set ()