Один из камней преткновения, с которым я столкнулся при изучении Vue, заключался в том, чтобы решить, хранить ли информацию как свойство или элемент данных при создании компонента. Я читал, что вы должны использовать реквизит, если вам нужно передать информацию от родительского компонента к дочернему компоненту. И что вы должны использовать член данных для информации, которую компонент использует внутри. Но я быстро обнаружил, что у меня есть информация, подходящая для обоих вариантов использования.
Например, предположим, что у вас есть компонент, который позволяет вам редактировать продукт, и что редактируемый продукт передается в компонент от родителя. Ваш компонент может выглядеть так:
Вы хотите, чтобы этот компонент позволял редактировать продукт, поэтому вы должны включить в шаблон форму, позволяющую пользователям редактировать сведения о продукте (например, цену или количество на складе). Одно из правил Vue заключается в том, что вы не должны изменять свойства. Если вы позволите компоненту редактировать свойство, вы можете столкнуться с некоторыми странными побочными эффектами, которые могут свести вас с ума. Если вы хотите редактировать информацию в компоненте, вы должны объявить его как элемент данных следующим образом:
Итак, теперь у вас есть проблема: у вас есть информация (в данном случае продукт), которая должна вести себя как свойство и элемент данных. Vue не позволит вам создать реквизит и элемент данных с одинаковыми именами.
Я обнаружил, что этот сценарий возникал снова и снова, когда я изучал Vue. Многие из найденных мной решений требовали использования Vuex для хранения всей вашей информации. Но я не был готов погрузиться в Vuex, потому что я все еще пытался усвоить основы Vue.
Немного покопавшись, я нашел этот пример в документации Vue. В нем упоминается, что вы не должны пытаться изменить свойство внутри дочернего компонента, и предлагается создать свойство для получения информации от родителя и элемент данных для его редактирования. Поскольку они оба не могут иметь одно и то же имя, в статье предлагается ставить перед реквизитом префикс initial. Таким образом, компонент может выглядеть следующим образом (убедитесь, что вы прочитали последнюю часть статьи, потому что в ней обсуждается очень важная деталь, отображаемая в примере кода):
Обратите внимание, как инициализируется член данных продукта. Он делает копию свойства initialProduct. Помните, что цель этого компонента — позволить пользователям редактировать продукт. И что в Vue вы никогда не должны изменять (редактировать) свойство. Итак, что мы сделали, так это скопировали первоначальный продукт, и мы можем отредактировать копию, оставив оригинал нетронутым.
Теперь этот подход может иметь последствия в будущем в зависимости от того, как вы разрабатываете свое приложение. Когда продукт редактируется в этом компоненте, вы можете захотеть сгенерировать событие, чтобы родитель мог знать об изменениях. Вы хотели бы передать элемент данных вместе с событием, которое является копией исходного продукта. Таким образом, родительскому компоненту может потребоваться некоторая логика, которая заменяет оригинал копией, созданной дочерним элементом.
Это был сценарий, который больше всего сбил меня с толку при изучении Vue, и трудно найти решение, которое не требует использования Vuex. Так что я надеюсь, что это избавит вас от некоторых проблем. И я был бы признателен за любую информацию от разработчиков, у которых гораздо больше опыта работы с Vue, чем у меня.
