Frontend | Вопросы собесов

🤔 В какой последователности будут вызываться хуки при использовании хуков жизненного цикла в миксине и подключении его в компонент?

В Vue 2 и Vue 3 можно подключать миксины (mixins), которые добавляют в компонент дополнительные методы, данные и хуки жизненного цикла.

🚩Пример в Vue 2

Миксин (myMixin.js)

export default {
  created() {
    console.log("🌍 Миксин: created");
  }
};

Компонент (MyComponent.vue)

<script>
import myMixin from "./myMixin.js";

export default {
  mixins: [myMixin],
  created() {
    console.log("📦 Компонент: created");
  }
};
</script>

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

Миксин: created
Компонент: created

Vue 3: хуки вызываются так же
Если использовать setup(), он выполнится после хуков миксина

import { onMounted } from "vue";
export default {
  mixins: [myMixin],
  setup() {
    console.log("🚀 setup()");
  },
  mounted() {
    console.log("📦 Компонент: mounted");
  }
};

Вывод в консоль

Миксин: mounted
setup()
Компонент: mounted

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

www.tg-me.com/us/Frontend | Вопросы собесов/com.easy_javascript_ru/1390

3.1K viewsApr 21 at 09:10

🤔 В какой последователности будут вызываться хуки при использовании хуков жизненного цикла в миксине и подключении его в компонент?

В Vue 2 и Vue 3 можно подключать миксины (mixins), которые добавляют в компонент дополнительные методы, данные и хуки жизненного цикла.

🚩Пример в Vue 2

Миксин (myMixin.js)

export default {
  created() {
    console.log("🌍 Миксин: created");
  }
};

<script>
import myMixin from "./myMixin.js";

export default {
  mixins: [myMixin],
  created() {
    console.log("📦 Компонент: created");
  }
};
</script>

Миксин: created
Компонент: created

import { onMounted } from "vue";
export default {
  mixins: [myMixin],
  setup() {
    console.log("🚀 setup()");
  },
  mounted() {
    console.log("📦 Компонент: mounted");
  }
};

Миксин: mounted
setup()
Компонент: mounted