[Перевод] Vue.js  —   Что нужно делать, чего нельзя делать, а также советы

внешний интерфейс Программа перевода самородков
[Перевод] Vue.js  —   Что нужно делать, чего нельзя делать, а также советы

Vue.js — что нужно и что нельзя делать, а также советы

Vue.js великолепен. Однако когда вы начнете создавать большие приложения JavaScript, вы начнете касаться границ Vue.js. Эти границы на самом деле не являются ограничениями фреймворка; скорее, эти границы являются важными дизайнерскими решениями, которые команда Vue.js постоянно развивает.

В отличие от React или Angular, Vue.js предназначен для разработчиков разного уровня. Он удобен и прост в использовании для начинающих и одинаково гибок для экспертов. Он не пытается избежать DOM. Наоборот, играет красиво.

Сказав это, этот пост больше похож на некоторые важные вещи, с которыми я столкнулся в своем путешествии по просветлению Vue.js.Обсуждения, вопросы и советыКаталог. Понимание этих ключевых аспектов дизайна помогает нам создавать крупномасштабные веб-приложения.

Опять же, эти обсуждения актуальны сегодня, 18 мая 2018 года. Когда платформа будет обновлена, базовый браузер и JS API изменятся, и они могут стать недействительными и неинтуитивными.

1. Почему Vue.js не использует ES-подобные компоненты из коробки?

Если вы пришли из фреймворка вроде Angular или какого-то строго типизированного языка с бэкенд-ООП, ваш первый вопрос будет — почему бы не использовать класс компонентов?

автор Vue.js,Ю Юси, на который хорошо ответили в комментариях GitHub:

Есть три основные причины, по которым классы не используются в качестве механизма по умолчанию:

  1. Классов ES недостаточно для нужд текущего API Vue.js. Классы ES не полностью разработаны и часто критикуются как шаг в неправильном направлении. Классы с закрытыми полями и декораторами могут помочь, когда они станут стабильными (по крайней мере, фаза 3).
  2. Курсы ES предназначены только для людей, знакомых с языками, основанными на классах. Легко исключить крупные веб-сообщества, которые не используют сложные инструменты сборки или конвертеры.
  3. Создание отличной иерархии компонентов пользовательского интерфейса — это отличная композиция компонентов. Это не имеет ничего общего с великой иерархией наследования. К сожалению, классы ES лучше справляются с последним.

2. Как создавать собственные абстрактные компоненты?

Если создания больших веб-приложений недостаточно, у вас есть сумасшедшая идея реализовать абстрактный компонент, например<transition>или<router-view>. Обсуждения по этому поводу определенно были, но до конца не дошло.

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

Но подумайте дважды, прежде чем сделать это. Мы полагались на примеси и простые функции в некоторых крайних случаях. Просто подумайте о минксинах как о своем абстрактном компоненте:

3. Мне очень не нравятся однофайловые компоненты Vue.js. Я предпочитаю разделять HTML, CSS и JavaScript.

Вам никто не мешает это сделать. Если вы философ старой школы разделения ответственности, который любит хранить отдельные вещи в отдельных файлах, или вы ненавидите редакторы кода, окружающие.vueошибочное поведение файла, то это, безусловно, возможно. Итак, что вам нужно сделать:

<!--https://vuejs.org/v2/guide/single-file-components.html -->

<!-- my-component.vue -->
<template src="./my-component.html"></template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Однако тут же возник следующий вопрос —Всегда ли моему компоненту нужны четыре файла? (vue+html+js+css). Я могу избавиться от него как-нибудь .vue файл?? Ответ определенно да, вы можете это сделать. использоватьvue-template-loader.

Мой коллега написал об этом хороший блог:

4. Функциональные компоненты

Благодаря React.js функциональные компоненты сейчас в моде, хотя и не без оснований. OниБыстрый, без сохранения состояния и простой в тестировании. Однако у них есть некоторые проблемы.

4.1 Почему я не могу использовать декоратор @Component на основе классов для функциональных компонентов?

Возвращаясь к классам, следует отметить, что класс — это структура данных, предназначенная для поддержания локального состояния. Если функциональный компонент не имеет состояния, то @Component Бессмысленно.

Соответствующие обсуждения можно найти по адресу:

4.2 Внешние классы и стили не работают с функциональными компонентами

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

4.3 Функциональные компоненты всегда перерисовываются?

TLDR: использование в функциональных компонентахс данными компонентыбудь осторожен, когда

Функциональные компоненты оченьжаждущийИспользуйте функцию рендеринга компонента напрямую. Это также означает, что вы должны:

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

Функциональные компоненты лучше использовать, если они являются дочерними компонентами.. Следует отметить, что это поведение также относится к React.js.

4.4 Как инициировать события из функциональных компонентов Vue.js?

Инициировать события из функциональных компонентов непросто. К сожалению, в документации это не упоминается.$emitМетоды недоступны в функциональных компонентах. В этом отношении помогут следующие вопросы о переполнении стека:

5. Компоненты прозрачной оболочки Vue.js

Компоненты прозрачной оболочки оборачивают некоторую структуру DOM, но предоставляют события для этой структуры DOM вместо корневого элемента DOM. Например,

<!-- Wrapper component for input -->
<template>
    <div class="wrapper-comp">
        <label>My Label</label>
        <input @focus="$emit('focus')" type="text"/>
    </div>
</template>

Здесь мы простоinputтег интереса вместо корняdivэлемент, так как он в основном используется для добавления стиля и украшения. Пользователя этого компонента могут интересовать несколько событий со входа, напримерblur,focus,clickа такжеhoverЖдать. Это означает, что мы должны перезапускать каждое событие. Наш компонент выглядит так.

<!-- Wrapper component for input -->
<template>
    <div class="wrapper-comp">
        <label>My Label</label>
        <input type="text"
            @focus="$emit('focus')"
            @click="$emit('click')"
            @blur="$emit('blur')"
            @hover="$emit('hover')"
        />
    </div>
</template>

сейчасантисухой и выглядит грязно. Простое решение — использовать экземпляр Vue наvm.$listenersСвойство просто перепривязывает прослушиватель событий к нужному элементу DOM:

<!-- Notice the use of $listeners -->
<template>
    <div class="wrapper-comp">
        <label>My Label</label>
        <input v-on="$listeners" type="text"/>
    </div>
</template>
<!-- Uses: @focus event will bind to internal input element -->
<custom-input @focus="onFocus"></custom-input>

6. Почему вы не можете v-on или излучать из слота

Я часто вижу, как разработчики пытаются запускать события из слота или прослушивать события в слоте.

компонентыslotПредоставляется вызывающим родительским компонентом. Это означает, что все события должны быть связаны с вызывающим компонентом. Попытка прослушать эти изменения означает, что ваши родительские и дочерние компоненты тесно связаны, есть еще один способ сделать это,Evan YouКрасиво объяснил:

7. Слоты в слотах (читай слоты-потомки)

В какой-то момент вы столкнетесь с этой ситуацией. Представьте, что у вас есть компонент, скажем, A, который принимает несколько слотов. Следуя принципу композиции, вы будете использовать компонентыAСоздайте еще один компонентB. теперь вы получаете компонентBи в компонентеCиспользуй это.

Вопрос в том,  —  как соединить компонентыCСлот в переданномA?

Ответ на этот вопрос зависит от того, что вы используете? Если вы используете функции рендеринга, то это довольно просто. Функция рендеринга компонента B будет следующей:

// Render function for component B
function render(h) {
    return h('component-a', {
        // Passing slots as they are to component A
        scopedSlot: this.$scopedSlots
    }
}

Однако, если вы используете функции рендеринга на основе шаблонов, вам не повезло. К счастью, эта проблема решается, и у нас может быть что-то для компонентов на основе шаблонов:

Надеюсь, этот пост дал представление об основах дизайна Vue.js, а также советы и рекомендации по использованию расширенных сценариев в Vue.js.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории