Расскажите об экземпляре класса Vue?vue-6

Экземпляр Vue (Vue instance) — это фундаментальная концепция во Vue.js, представляющая корневой объект приложения или компонента. Рассмотрим его детально.

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

Базовое создание:

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Где:

  • vm — сокращение от ViewModel (общепринятое название)
  • el — элемент DOM для монтирования
  • data — реактивные данные

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

1. Данные и методы

data() {
  return { count: 0 }
},
methods: {
  increment() {
    this.count++
  }
}

Доступны в шаблоне как {{ count }} и @click="increment"

2. Вычисляемые свойства

computed: {
  doubleCount() {
    return this.count * 2
  }
}

3. Наблюдатели

watch: {
  count(newVal, oldVal) {
    console.log(`Count changed from ${oldVal} to ${newVal}`)
  }
}

Жизненный цикл экземпляра

Полный набор хуков:

{
  beforeCreate(),
  created(),
  beforeMount(),
  mounted(),
  beforeUpdate(),
  updated(),
  beforeDestroy(),
  destroyed()
}

Важные свойства и методы

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

  • $data — ссылка на объект данных
  • $props — полученные props
  • $el — корневой DOM элемент
  • $options — использованные при создании опции
  • $refs — ссылки на DOM элементы/компоненты
  • $root — корневой экземпляр
  • $parent — родительский экземпляр
  • $children — дочерние компоненты

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

  • $watch() — программное добавление наблюдателя
  • $set() — добавление реактивного свойства
  • $delete() — удаление реактивного свойства
  • $on(), $emit(), $off() — работа с событиями
  • $nextTick() — выполнение после обновления DOM

Практические примеры

1. Доступ к данным

console.log(vm.$data.message) // "Hello Vue!"
console.log(vm.message) // Автоматический прокси

2. Динамическое добавление данных

vm.$set(vm.someObject, 'newProp', 42)

3. Использование $nextTick

this.count = 5
this.$nextTick(() => {
  // DOM обновлен
})

Особенности работы

1. Реактивность

Данные в data становятся реактивными автоматически, но:

  • Новые свойства нужно добавлять через Vue.set()/this.$set()
  • Массивы требуют особых методов (push, pop, splice и т.д.)

2. Сравнение с компонентами

  • Каждый компонент — это тоже экземпляр Vue
  • Имеет те же свойства/методы плюс специфичные для компонентов

3. Монтирование

Можно отложить монтирование:

const vm = new Vue({
  // без el
  template: '<div>{{ message }}</div>'
})

vm.$mount('#app') // монтировать позже

Лучшие практики

  1. Избегайте:
  • Прямого изменения $data
  • Использования $parent/$children (нарушают инкапсуляцию)
  • Частого использования $refs (реактивные данные предпочтительнее)
  1. Рекомендуется:
  • Использовать $nextTick для работы с DOM после изменений
  • Четко разделять данные, методы и вычисляемые свойства
  • Использовать $emit для коммуникации с родителем

Резюмируем:

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

Вопросы

Собеседования