Опции экземпляра Vue

Опции в Vue — это различные опции, доступные в экземпляре Vue при использовании Options API.

Некоторые общие опции экземпляров Vue:

  • el- Указывает DOM-элемент, к которому монтируется экземпляр Vue. Если не указан, экземпляр Vue не будет смонтирован автоматически.

  • data— Определяет объект data экземпляра Vue. Шаблон, вычисляемые свойства, методы, наблюдатели и т. д. экземпляра Vue могут обращаться к этим данным.

  • computed— Содержит вычисляемые свойства, значения которых кэшируются на основе их зависимостей. Вычисляемые свойства пересчитываются только при изменении их зависимостей.

  • methods— Определяет методы экземпляра Vue, которые можно вызывать в шаблоне через обработчики событий.

  • watch— Содержит один или несколько наблюдателей для отслеживания изменений данных в экземпляре Vue и реагирования на них.

  • props— Определяет внешние данные, которые может получать компонент.

  • components— Позволяет регистрировать пользовательские компоненты в экземпляре Vue.

  • directives— Позволяет регистрировать глобальные пользовательские директивы.

  • filters— Определяет фильтры, которые можно использовать в шаблоне для форматирования текста.

  • model— Задаёт пользовательские свойства и события v-model, используемые компонентом.

  • provide/inject— Обеспечивает возможность внедрения зависимостей, позволяя передавать данные между компонентами.

  • хуки жизненного цикла— ВключаетonMounted, onUpdated, onUnmountedхуки жизненного цикла и т. д., используемые для выполнения кода на разных этапах экземпляра Vue.

  • template- Определяет HTML-шаблон экземпляра Vue.

  • Функция render- Позволяет использовать функции JavaScript для рендеринга компонентов, предоставляя более продвинутые возможности настройки.

  • errorCaptured- Используется для глобального перехвата ошибок в экземпляре Vue.

  • emits- Определяет события, которые компонент может генерировать.

  • setup- Входная функция в Composition API Vue 3, используемая для организации логики компонента.

el

Точка монтирования, используемая для указания DOM-элемента, к которому монтируется экземпляр Vue:

Пример

const app = Vue.createApp({
  // options
});
app.mount('#app');

data

  • Тип: Function или Object

  • Назначение: dataэто место в экземпляре Vue, используемое для хранения данных компонента. Вы можетеdataопределить различные свойства данных в нём и использовать их на странице через синтаксис шаблонов.dataДанные в нём обновляются реактивно, то есть когда данные изменяются, связанное содержимое страницы обновляется автоматически.

Пример

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

computed

  • Тип: Object

  • Назначение: computedСвойство позволяет объявлять вычисляемые свойства на основе реактивных зависимостей. Вычисляемые свойства пересчитываются только при изменении связанных с ними зависимостей, а результаты вычислений кэшируются, чтобы избежать ненужных повторных расчётов.

Пример

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  вычислено: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

methods

  • Тип: Object

  • Назначение: methodsСвойство используется для хранения методов в экземпляре Vue. Эти методы можно вызывать в шаблоне, а также использовать в других методах экземпляра. В отличие от вычисляемых свойств, методы выполняются заново при каждом вызове, что делает их подходящими для обработки событий или выполнения асинхронных операций.

Пример

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

watch

  • Тип: Object или Function

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

Пример

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Сообщение изменено с ${oldValue} на ${newValue}`);
    }
  }
});

props

  • Тип: Array или Object

  • Назначение: propsСвойство используется для получения данных, передаваемых от родительского компонента дочернему компоненту. В дочернем компоненте,propsданные, переданные родительским компонентом, принимаются и могут использоваться внутри компонента.

В следующем примере MyComponent получает prop title и использует его в шаблоне:

Пример

const MyComponent = {
  props: ['title'],
  template: '<h1>{{ title }}</h1>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Hello Vue 3!"></my-component>'
});

app.mount('#app');

template

  • Тип: String

  • Назначение: templateСвойство определяет структуру шаблона Vue-компонента. В шаблоне можно использовать синтаксис шаблонов Vue, включая интерполяцию, директивы, вычисляемые свойства и т. д. В конечном счёте шаблон компилируется в функцию рендеринга для генерации виртуального DOM компонента.

Пример

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  template: '<div>{{ message }}</div>'
});

components

Опция `components` используется для регистрации локальных компонентов.

Пример

const ChildComponent = {
  template: '<div>A child component</div>'
};

const app = Vue.createApp({
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

provide / inject

Родительский компонент предоставляет данные, а дочерний компонент внедряет их и использует.

Пример

const ChildComponent = {
  inject: ['message'],
  template: '<div>{{ message }}</div>'
};

const app = Vue.createApp({
  предоставляют() {
    return {
      message: 'Provided Message'
    };
  },
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

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

beforeCreate

Вызывается перед инициализацией экземпляра.

Пример

const app = Vue.createApp({
  beforeCreate() {
    console.log('beforeCreate');
  }
}).mount('#app');

created

Вызывается после создания экземпляра.

Пример

const app = Vue.createApp({
  created() {
    console.log('created');
  }
}).mount('#app');

beforeMount

Вызывается перед монтированием.

Пример

const app = Vue.createApp({
  beforeMount() {
    console.log('beforeMount');
  }
}).mount('#app');

mounted

Вызывается после монтирования экземпляра.

Пример

const app = Vue.createApp({
  mounted() {
    console.log('mounted');
  }
}).mount('#app');

beforeUpdate

Вызывается перед обновлением данных.

Пример

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello'
    };
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}).mount('#app');

updated

Вызывается после обновления данных.

Пример

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello'
    };
  },
  updated() {
    console.log('updated');
  }
}).mount('#app');

beforeUnmount

Вызывается перед размонтированием экземпляра.

Пример

const app = Vue.createApp({
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}).mount('#app');

unmounted

Вызывается после размонтирования экземпляра.

Пример

const app = Vue.createApp({
  unmounted() {
    console.log('unmounted');
  }
}).mount('#app');

Другие параметры

directives

Регистрирует локальные директивы.

Пример

const app = Vue.createApp({
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  },
  template: '<input v-focus>'
}).mount('#app');

mixins

Объекты миксинов.

Пример

const myMixin = {
  created() {
    console.log('Mixin created');
  }
};

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('Компонент создан');
  }
}).mount('#app');

extends

Расширить другой компонент.

Пример

const BaseComponent = {
  created() {
    console.log('BaseComponent created');
  }
};

const app = Vue.createApp({
  extends: BaseComponent,
  created() {
    console.log('Extended component created');
  }
}).mount('#app');

inheritAttrs

Наследовать ли атрибуты от родительского компонента.

Пример

const MyComponent = {
  inheritAttrs: false,
  props: ['title'],
  template: '<div><h1>{{ title }}</h1></div>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Hello" id="app"></my-component>'
}).mount('#app');

setup

Используется для Composition API.

Пример

const app = Vue.createApp({
  setup() {
    const message = Vue.ref('Hello Vue 3!');
    return { message };
  },
  template: '<h1>{{ message }}</h1>'
}).mount('#app');

expose

В Composition API Vue 3, когда вы используете функцию setup для определения логики компонента, вы можете использовать метод expose, чтобы явно указать свойства и методы, которые должны быть доступны извне.

Ниже приведён простой пример, показывающий, как использовать expose для предоставления свойств и методов в компоненте Vue 3:

Родительский компонент (ParentComponent.vue)

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Вызвать метод дочернего компонента</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const child = ref(null);

    const callChildMethod = () => {
      if (child.value) {
        child.value.exposedMethod();
      }
    };

    return {
      child,
      callChildMethod
    };
  }
};
</script>

Дочерний компонент (ChildComponent.vue)

<template>
  <div>
    <p>{{ exposedData }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup(_, { expose }) {
    const exposedData = ref('Привет от дочернего компонента');
   
    const exposedMethod = () => {
      console.log('Вызван метод дочернего компонента');
    };

    expose({
      exposedData,
      exposedMethod
    });

    return {
      exposedData
    };
  }
};
</script>

Пояснение:

  1. Родительский компонент:

    • В родительском компоненте используйтеrefчтобы создать ссылку на дочерний компонент.child。
    • ВcallChildMethodВ методе черезchild.valueполучите доступ к экземпляру дочернего компонента и вызовите методы, предоставленные дочерним компонентом.exposedMethod。

  2. Дочерний компонент:

    • В дочернем компонентеsetupфункции, черезrefсоздайте реактивные данныеexposedData。
    • определите методexposedMethod, используемый для демонстрации того, как предоставлять методы.
    • Используйтеexposeметод для явного предоставленияexposedDataиexposedMethodродительскому компоненту.
    • ReturnexposedData, чтобы его можно было использовать в шаблоне.
Другие расширения