Как сделать ключ объекта $refs реактивным, чтобы к нему можно было применить $watch?

Question

[Артем Прохоров]

Версия 3.2.47
Хочется прослушивать this.$parent.$refs.content.clientWidth в одном из внутренних элементов.

Comments

[Aetae]

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

Также дополню:
По поводу $parent: в прикладном коде использовать $parent обоснованно можно примерно никогда. С вероятностью стремящейся к 100% вы делаете что-то неправильно. Возможно вам нужно provide\inject, возможно достаточно будет стандартных props и событий.
Каждый компонент должен быть чёрным ящиком и никак не зависеть от других, до такой степени, чтоб вы могли полностью переписать начинку компонента и это никак не отразилось на его использовании. Исключения - компоненты, что идут всегда в сцепке, но и для них стоит разработать стандартизированный api взаимодействия.

По поводу $ref: сделать реактивным $ref не то чтобы совсем невозможно, но просто не нужно: реактивность $ref будет означать только то, что вы будете отлавливать изменение ссылки на DOM объект, которого в обычном vue коде и так происходить не будет. Если же вы хотите ещё и отлавливать изменения свойств этого DOM объекта - то и это возможно, просто для каждого свойства придётся писать свой магический код детектирующий и триггерящий изменения, т.к. изначально никакого слежения в большинстве случаев предусмотрено не было. Собственно все современные фреймворки придуманы для того, чтобы заменить собой работу с DOM, потому если уж вы сами лезете в DOM в обход фреймворка - будьте любезны всё делать сами ручками.

Answer 1

[Антон Антон]

Никак, для отслеживания изменения ширины элемента нужно цепляться с помощью ResizeObserver непосредственно к dom элементу. Ну и обращение к $parent выглядит как какой-то костыль.