В чем разница между созданным и смонтированным в Vue?
16 мая 2022 г.Одна из вещей, которая смущает большинство людей, говоря о хуках жизненного цикла в Vue, — это разница между «создано» и «смонтировано». У них обоих похожие имена, и они чувствуют, что должны делать одно и то же, но есть некоторые тонкие различия.
Разница между «создано» и «смонтировано» в Vue
Начнем с того, что и created(), и mounted() имеют доступ к данным и свойствам вашего прототипа.
Например, оба хука будут отображать консольный журнал «Мое сообщение» ниже, а также значение по умолчанию для «myProp», которое равно «Some Prop»:
```javascript
экспорт по умолчанию {
данные() {
возврат {
сообщение: 'Мое сообщение'
реквизит: {
моя опора: {
тип: Строка,
по умолчанию: «Некоторая опора»
созданный() {
console.log(это.msg);
console.log(this.myProp);
установлен () {
console.log(это.msg);
console.log(this.myProp);
Наследование свойства для созданного и установленного
Фундаментальное различие между created() и mounted() заключается в том, что у вас еще нет доступа к DOM в created().
Даже если вы установите свойство, оно все равно будет доступно как в
created(), так и вmounted()
В приведенном выше примере, если мы попытаемся сослаться на this.$el, он вернет null в created() и вернет элемент DOM в mounted():
```javascript
экспорт по умолчанию {
созданный() {
// Возвращает ноль
console.log(это.$el);
установлен () {
// Возвращает элемент DOM в консоль:
console.log(это.$el);
Таким образом, любые манипуляции с DOM или даже получение структуры DOM с использованием таких методов, как querySelector, будут недоступны в created().
created() отлично подходит для вызова API, а mounted() отлично подходит для любых действий после полной загрузки элементов DOM.
Composition API и созданный или смонтированный
Одно предостережение заключается в том, что если вы используете Composition API, created() и даже beforeCreated() больше не существуют. Вместо этого вы должны использовать setup(). Эта функция заменяет как created(), так и beforeCreated().
Поэтому DOM по-прежнему недоступен в setup(). В Composition API mounted() остается без изменений.
Также опубликовано [Здесь] (https://fjolt.com/article/vue-difference-between-created-and-mounted)
Оригинал