Экземпляр компонента Vue

В Vue.js экземпляр компонента является одним из самых фундаментальных строительных блоков приложения Vue. Каждый экземпляр компонента — это компонент Vue, который имеет собственный шаблон, данные, методы и хуки жизненного цикла и может независимо управлять своим состоянием и поведением. Ниже приведено подробное введение в экземпляры компонентов Vue:

Создание экземпляра компонента Vue

В Vue.js экземпляр компонента обычно создаётся с помощью метода createApp и объекта параметров компонента.

Объект параметров компонента может содержать следующие свойства:

  • data: Объект данных, используемый для хранения реактивных данных компонента.
  • props: Массив или объект props, используемый для получения данных, переданных от родительского компонента.
  • computed: Объект вычисляемых свойств, динамически рассчитываемых на основе реактивных зависимостей.
  • methods: Объект методов, содержащий функции и операции внутри компонента.
  • watch: Объект наблюдателей, используемый для отслеживания изменений данных и соответствующего реагирования.
  • template: Строка, определяющая структуру шаблона компонента.
  • render: Функция, используемая для рендеринга виртуального DOM компонента.
  • setup: Функция, используемая для настройки начального состояния компонента, данных, вычисляемых свойств и наблюдателей (в Vue 3).

Ниже приведён пример простого экземпляра компонента Vue:

Пример

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="greet">Greet</button>
    </div>
  `
});

app.mount('#app');

Пояснение:

  • dataФункция возвращает объект, содержащийmessageсвойство, используемое для хранения состояния компонента.
  • methodsОбъект содержитgreetметод; при нажатии кнопки появляется диалоговое окно, отображающееmessageсодержимое.
  • templateСтрока определяет структуру шаблона компонента, используя интерполяцию и привязку событий для отображения данных и взаимодействия.

Хуки жизненного цикла

Экземпляры компонентов Vue имеют функции-хуки жизненного цикла, которые позволяют разработчикам выполнять пользовательскую логику на разных этапах жизненного цикла компонента. Распространённые хуки жизненного цикла включаютcreated、mounted、updatedиdestroyedи т. д.

Пример

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Компонент создан');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Компонент обновлён');
  },
  destroyed() {
    console.log('Компонент уничтожен');
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
});

Взаимодействие компонентов

Экземпляры компонентов Vue взаимодействуют друг с другом через props, events, provide/inject, $parent/$children, $attrs/$listeners и другие методы, в зависимости от отношений между компонентами и их требований. Эти механизмы позволяют компонентам передавать данные между разными уровнями и реагировать на действия пользователя.

Свойства экземпляра компонента

$data

Свойство $data содержит все свойства данных экземпляра компонента. Оно реактивно, то есть при изменении данных связанные представления автоматически обновляются.

Пример

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

const vm = app.mount('#app');
console.log(vm.$data); // { message: 'Hello, Vue!' }

$props

Свойство $props содержит все props, переданные из родительского компонента, которые получает текущий компонент. Оно доступно только для чтения.

Пример

<!-- ParentComponent.vue -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Сообщение от родителя'
    };
  }
};
</script>

Пример

// ChildComponent.vue
export default {
  props: ['message'],
  mounted() {
    console.log(this.$props.message); // 'Сообщение от родителя'
  }
};

$refs

$refs содержит все DOM-элементы или экземпляры дочерних компонентов внутри компонента, имеющие атрибут ref. Доступ к этим элементам или экземплярам компонентов можно получить через $refs.

Пример

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // Доступ к DOM-элементу
this.$refs.inputField.focus(); // Вызов метода DOM-элемента
  }
}
</script>

Свойство $el представляет корневой DOM-элемент текущего экземпляра компонента. Доступ к этому свойству возможен только после монтирования компонента.

Пример

const app = Vue.createApp({
  template: '<div>Привет, Vue!</div>'
});

const vm = app.mount('#app');
console.log(vm.$el); // <div id="app">Привет, Vue!</div>

$attrs

$attrs содержит все атрибуты, переданные из родительского компонента в текущий компонент, но не объявленные в дочернем компоненте. Эти атрибуты можно использовать для передачи дополнительных не-prop атрибутов дочерним компонентам.

Пример

<!-- ParentComponent.vue -->
<template>
  <child-component custom-attr="value"></child-component>
</template>

<!-- ChildComponent.vue -->
<script>
export default {
  mounted() {
    console.log(this.$attrs); // { custom-attr: 'value' }
  }
};
</script>

$listeners

$listeners содержит все слушатели (обработчики событий), переданные из родительского компонента в текущий компонент, и может быть напрямую привязан к корневому элементу компонента или другим элементам.

Пример

<!-- ChildComponent.vue -->
<template>
  <button v-on="$listeners">Нажми меня</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$listeners); // { click: handleClick }
  },
  methods: {
    handleClick() {
      console.log('Кнопка нажата');
    }
  }
};
</script>

Методы экземпляра компонента

$mount()

Метод $mount() вручную монтирует компонент Vue в DOM-элемент. В Vue 3 монтирование обычно выполняется автоматически через createApp().mount(), а ручное монтирование требуется лишь в некоторых случаях.

Пример

const app = Vue.createApp({
  template: '<div>Привет, Vue!</div>'
});

const vm = app.mount('#app');

$destroy()

Метод $destroy() уничтожает текущий экземпляр компонента, отвязывает все его прослушиватели событий и освобождает занимаемые им ресурсы. Он полезен в специфических сценариях, таких как динамическое создание и уничтожение компонентов.

Пример

vm.$destroy();

$emit()

Метод $emit() используется для запуска пользовательских событий в текущем экземпляре компонента и передачи данных родительскому компоненту. Обычно он используется вместе с директивой v-on.

Пример

<button @click="$emit('custom-event', eventData)">Нажми меня</button>

$nextTick()

Метод $nextTick() выполняет указанную функцию обратного вызова после завершения следующего цикла обновления DOM. Он используется для выполнения некоторых операций после обновления DOM.

Пример

vm.$nextTick(() => {
  // Операции, выполняемые после завершения обновления DOM
});

$watch()

Метод $watch() используется для отслеживания изменений данных в экземпляре компонента и выполнения указанной функции обратного вызова при изменении данных.

Пример

vm.$watch('message', (newValue, oldValue) => {
  console.log(`Сообщение изменено с ${oldValue} на ${newValue}`);
});

Эти свойства и методы придают экземплярам компонентов Vue богатую функциональность и гибкость, позволяя удовлетворять разнообразные потребности разработчиков при создании сложных приложений. От управления данными до обработки событий, а затем до динамических операций с компонентами — всем можно управлять и контролировать через экземпляры компонентов.

Другие расширения