Миксины Vue3

Миксины определяют часть переиспользуемых методов или вычисляемых свойств. Объект миксина может содержать любые опции компонента. Когда компонент использует объект миксина, все опции объекта миксина будут примешаны к собственным опциям компонента.

Рассмотрим простой пример:

Пример

//Определите объект миксина const myMixin = { created() { this.hello() }, methods: { hello() { console.log('Добро пожаловать в пример миксина - ПРИМЕР!') } } } //Определите приложение, используя миксины const app = Vue.createApp({ mixins: [myMixin] }) app.mount('#app') //=> "Добро пожаловать в пример миксина - ПРИМЕР!"

Попробуйте сами »

Слияние опций

Когда компонент и объект миксина содержат опции с одинаковыми именами, эти опции будут объединены соответствующим образом.

Например, объекты данных внутри объединяются поверхностно (один уровень глубины свойств), и при конфликте с данными компонента приоритет имеют данные компонента.

В следующем примере экземпляр Vue и объект mixin содержат один и тот же метод. Из результата вывода видно, что две опции объединены.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VueПример теста - Учебное пособие по примерам(example.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id = "app"></div> <script type = "text/javascript"> const myMixin = { data() { return { message: 'hello', foo: 'example' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message: 'goodbye', bar: 'def' } }, created() { document.write(JSON.stringify(this.$data)) } })

Результат вывода:

{"message":"goodbye","foo":"example","bar":"def"}

Попробуйте сами »

Функции-хуки с одинаковым именем будут объединены в массив, поэтому все они будут вызваны. Кроме того, хуки объекта mixin будут вызваны перед собственными хуками компонента.

const myMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('组件钩子被调用')
  }
})

// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

Опции, значения которых являются объектами, такие как methods, components и directives, будут объединены в один и тот же объект. Когда два имени ключей объекта конфликтуют, берётся пара ключ-значение объекта компонента.

Пример

const myMixin = { methods: { foo() { console.log('foo') }, conflicting() { console.log('from mixin') } } } const app = Vue.createApp({ mixins: [myMixin], methods: { bar() { console.log('bar') }, conflicting() { console.log('from self') } } }) const vm = app.mount('#app') vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"

В приведённом выше примере мы вызвали следующие три метода:

vm.foo();
vm.bar();
vm.conflicting();

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

Глобальный миксин

Вы также можете зарегистрировать объект mixin глобально. Будьте осторожны при его использовании! После использования глобального объекта mixin он повлияет на все экземпляры Vue, созданные после этого. При правильном использовании он может внедрять логику обработки для пользовательских объектов.

Пример

const app = Vue.createApp({ myOption: 'hello!' }) //Внедрить обработчик для пользовательской опции 'myOption'. app.mixin({ created() { const myOption = this.$options.myOption if (myOption) { document.write(myOption) } } }) app.mount('#app') // => "hello!"

Попробуйте сами »

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

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