4 самых популярных запроса о Vue.js 3 на StackOverflow

Отвечая на 4 самых популярных вопроса о Vue.js 3.

StackOverflow известен большинству общественности как платформа, используемая программистами. Но сегодня он включает в себя больше, чем просто мир программного обеспечения. Я имею в виду, мы можем сказать, что это во всех сферах нашей жизни.

На него нажимают много раз в день многие люди в мире программного обеспечения. область использования; иногда создание проекта, иногда исправление синтаксической ошибки, иногда получение фрагмента кода и выход и многое другое.

Сегодня я поделюсь с вами самыми популярными вопросами на Vue.js.

Давайте начнем!

Вопрос 1

Ref vs Reactive в Vue 3?

Это голосование 84, 26 тысяч просмотров.

Мы можем пояснить ответ на вопрос следующим образом.

ref используется для реактивных переменных, таких как примитивные значения (логическое значение, число, строка, символ, ноль и т. д.).

Переменные, которые мы определяем как reactive, должны быть определены как типы объектов. Для reactive дополнительной информации мы можем преобразовать ее в ref тип, добавив toRefs к свойствам определенного объекта.

Лучший ответ на этот вопрос в Stack Overflow:

Ключевые моменты

reactive() принимает только объекты, НЕ JS-примитивы (String, Boolean, Number, BigInt, Symbol, null, undefined)

ref() звонит reactive() за кулисами

Поскольку reactive() работает для объектов, а ref() вызывает reactive(), объекты работают для обоих

НО, ref() имеет свойство .value для переназначения, reactive() не имеет этого и поэтому НЕЛЬЗЯ переназначить

ref() когда…

это примитив (например, 'string', true, 23 и т. д.)

это объект, который нужно позже переназначить (например, массив — подробнее здесь)

reactive() когда…

это объект, который вам не нужно переназначать, и вы хотите избежать накладных расходов ref()

Вкратце

ref() кажется подходящим вариантом, поскольку он поддерживает все типы объектов и позволяет переназначать их с помощью .value. ref() — хорошее место для начала, но по мере того, как вы привыкнете к API, знайте, что reactive() требует меньше накладных расходов, и вы можете обнаружить, что оно лучше соответствует вашим потребностям.

reactive()

const person = reactive({
  name: 'Albert',
  isNinja: true,
});

ref()

const name = ref('Albert');
const isNinja = ref(true);

вопрос 2

В чем разница между Promises и Observables?

Это голосование 57, 168 тысяч просмотров.

Я хочу использовать Bootstrap 5 с Vue 3. Поскольку Bootstrap 5 использует ванильный JS (без JQuery), могу ли я использовать Bootstrap 5 непосредственно в проекте Vue 3 (без использования Bootstrap-Vue)? Кто-нибудь может подсказать, как использовать Bootstrap 5 с Vue 3?

Лучший ответ на этот вопрос в Stack Overflow:

Bootstrap 5 больше не нуждается в jQuery, поэтому его проще использовать с Vue, и больше не требуется такая библиотека, как bootstrap-vue.

Установите bootstrap так же, как и любой другой модуль JS в проекте Vue, используя npm install или добавив его в файл package.json.

npm install --save bootstrap

Затем добавьте компоненты Bootstrap CSS и JS в точку входа проекта Vue (то есть: src/main.js):

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

Тогда самый простой способ использовать компоненты Bootstrap — использовать атрибуты data-bs-. Например, вот компонент Bootstrap Collapse:

<button 
  class="btn btn-primary" 
  data-bs-target="#collapseTarget" 
  data-bs-toggle="collapse">
  Bootstrap collapse
</button>
<div class="collapse py-2" id="collapseTarget">
  This is the toggle-able content!
</div>

Вопрос 3

Шина событий Vue.js 3

Это голосование 41, 26 тысяч просмотров

Как создать шину событий в Vue 3?

В Vue 2 это было:

export const bus = new Vue();
bus.$on(...)
bus.$emit(...)

В Vue 3 Vue больше не является конструктором, а Vue.createApp({}); возвращает объект, у которого нет методов $on и $emit.

Лучший ответ на этот вопрос в Stack Overflow:

Как предлагается в официальной документации, вы можете использовать библиотеку mitt для отправки событий между компонентами, предположим, что у нас есть боковая панель и header, которая содержит кнопку, закрывающую/открывающую боковую панель, и нам нужна эта кнопка для переключения некоторых свойств внутри компонент боковой панели:

в main.js импортируйте эту библиотеку и создайте экземпляр этого эмиттера и определите его как глобальное свойство:

Установка:

npm install --save mitt

Использование:

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt';
const emitter = mitt();
const app = createApp(App);
app.config.globalProperties.emitter = emitter;
app.mount('#app');

В заголовке создайте событие toggle-sidebar с некоторой полезной нагрузкой.

Для тех, кто использует составной API, они могут использовать emitter следующим образом:

Создайте файл src/composables/useEmitter.js, как показано ниже:

import { getCurrentInstance } from 'vue'
export default function useEmitter() {
    const internalInstance = getCurrentInstance(); 
    const emitter = internalInstance.appContext.config.globalProperties.emitter;
    return emitter;
}

И с этого момента вы можете использовать useEmitter так же, как и useRouter:

import useEmitter from '@/composables/useEmitter'
export default {
  setup() {
    const emitter = useEmitter()
    ...
  }
  ...
}

Вопрос 4

Vue 3 Composition API — как получить элемент компонента ($el), на котором смонтирован компонент?

Это голосование 22, 24к просмотров

Я хочу использовать onMounted для запуска сторонней библиотеки. Для этого мне нужен элемент компонента в качестве его контекста. В Vue 2 я бы получил это с помощью this.$el, но не уверен, как это сделать с функциями композиции. setup имеет два аргумента, и ни один из них не содержит элемент.

setup(props, context) {
    onMounted(() => {
        interact($el)
            .resizable();
    })
}

Лучший ответ на этот вопрос в StackOverflow:

В Vue 3 компоненты больше не ограничены только одним корневым элементом. Неявно это означает, что у вас больше нет $el.
Вы должны использовать ref для взаимодействия с любым элементом в вашем шаблоне.

Как указал @AndrewSee в комментариях, при использовании функции рендеринга (а не шаблона) вы можете указать желаемые параметры ref в параметрах createElement:

render: function (createElement) {
  return createElement('div', { ref: 'root' })
}
// or, in short form:
render: h => h('div', { ref: 'root' }) 

Чтение вопросов и изучение решений даст вам много информации. Поэтому чаще читайте и пересматривайте.

Спасибо, для получения дополнительной информации посетите StackOverflow.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.