Миграция из Vue 1.x

Последнее обновление 24 июля 2019 13:11:47 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Часто задаваемые вопросы

Около 90% API-интерфейса Vue 2.X совпадает с API-интерфейсом Vue 1.X, и концепция ядра не изменилась. Это будет длинный урок, потому что мы хотели бы предложить очень подробные объяснения и включить много примеров. Вы не должны читать сверху вниз!

с чего начать миграцию?

Начать можно с запуска помощника по миграции в текущем проекте. Мы тщательно сжали и превратили старшего разработчика Vue в простой интерфейс командной строки. Они сообщат вам всякий раз, когда узнают устаревшую функцию, предложат предложения, а также предоставят ссылки на дополнительную информацию.
Затем вам нужно просмотреть содержание этой страницы на боковой панели. Если вы заметили тему, на которую вы можете повлиять, и помощник по миграции не уловил ее, проверьте это.
Если вы написали какие-либо тесты, запустите тесты и посмотрите, все ли что-то не получается. Если у вас нет тестов, вам просто нужно открыть приложение в браузере и следить за ошибками или предупреждениями во время навигации.
Ваше приложение должно быть полностью перенесено; Вы можете прочитать оставшуюся часть страницы, если хотите больше, или использовать новое руководство с самого начала. Вы можете просмотреть многие части, так как вы уже знакомы с основными понятиями.

Сколько времени займет миграция приложения Vue 1.x на 2.0?

Это зависит от:

По размеру вашего приложения (малые и средние приложения, вероятно, будут меньше, чем за день)
На сколько раз вы отвлекаетесь и начинаете играть с новыми классными функциями.
На какие устаревшие функции вы используете. Большинство из них можно обновить с помощью функции поиска и замены, однако другие могут занять несколько минут. Если вы в настоящее время не придерживаетесь лучших практик, Vue 2.0 постарается заставить вас сделать это. Это окажется хорошей вещью в долгосрочной перспективе, но может означать значительный (хотя, возможно, запоздалый) рефакторинг.

Если я обновлюсь до Vue 2, придется ли мне также обновлять Vuex и Vue Router?

Vue 2 совместим только с Vue Router 2, поэтому да, вам также придется следовать пути миграции для Vue Router. Большинство приложений не имеют много кодов маршрутизатора, поэтому это не должно занять больше часа.

Вам не придется обновлять Vuex, потому что даже версия 0.8 совместима с Vue 2. Но, учитывая, что вы, возможно, захотите воспользоваться преимуществами новых функций Vuex 2, таких как модули и сокращенный шаблон, вы, скорее всего, захотите немедленно обновить.

Шаблоны

Экземпляры фрагмента ^{удалены}

В Vue 2 каждый компонент должен иметь ровно один корневой элемент. Экземпляры фрагментов больше не разрешены. Таким образом, данный шаблон выглядит так:

<p>foo</p>
<p>bar</p>

Рекомендуется обернуть все содержимое в новый элемент, как показано:

<div>
  <p>foo</p>
  <p>bar</p>
</div>

Крючки жизненного цикла

beforeCompile ^{удалено}

Вместо этого используйте созданный хук.

Путь обновления

Чтобы найти все примеры этого хука, запустите помощник по миграции на вашей кодовой базе.

скомпилировано ^{заменено}

Вместо этого используйте новый навесной крюк.

прикреплен ^удален

Используйте пользовательскую проверку в DOM в других хуках. Например, замена:

attached: function () {
  doSomething()
}
 This could suffice:
```mounted: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

Путь обновления

Чтобы найти все примеры этого хука, запустите помощник по миграции на вашей кодовой базе.

отстраненный ^удален

Используйте собственную проверку in-DOM в других хуках. Например, при замене:

detached: function () {
  doSomething()
}```
This could suffice:
destroyed: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

Путь обновления

Чтобы найти все примеры этого хука, запустите помощник по миграции на вашей кодовой базе.

init ^{переименован}

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

Путь обновления

Чтобы найти все примеры этого хука, запустите помощник по миграции на вашей кодовой базе.

готов ^{заменить}

Вместо этого используйте новый навесной крюк. Обратите внимание, что при установленном, нет гарантии быть в документе. Следовательно, также включите Vue.nextTick / vm. $ NextTick. Например:

mounted: function () {
  this.$nextTick(function () {
    // code that assumes this.$el is in-document
  })
}

Путь обновления

Чтобы найти все примеры этого хука, запустите помощник по миграции на вашей кодовой базе.

v-за

v-for Аргумент Порядок для массивов ^{изменен}

Порядок аргументов для массивов был (индекс, значение) при включении индекса. Теперь это (значение, индекс), чтобы быть более совместимым с нативными методами массива JavaScript, такими как forEach и map.

Путь обновления

Вы можете запустить помощника по миграции в своей кодовой базе, чтобы найти примеры устаревшего порядка аргументов. Обратите внимание, что если вы называете свои аргументы индекса чем-то необычным, например, num или position, помощник не помечает их.

v-за Довод Заказ объектов ^{изменен}

Когда мы включаем имя свойства / ключ, порядок аргументов для объектов раньше был (имя, значение) ранее. Теперь (значение, имя) должно быть более согласованным с обычными итераторами объектов, такими как lodash.

Путь обновления

Запустите помощник по миграции в вашей кодовой базе, чтобы найти примеры устаревшего порядка аргументов. Обратите внимание, что если вы называете свои ключевые аргументы чем-то вроде name или property, помощник не помечает их.

$ index и $ key удалены

Неявно назначенные переменные $ key и $ index были удалены в пользу явного определения их в v-for. Это облегчило чтение кода для разработчиков, менее опытных с Vue, а также привело к гораздо более понятному поведению при работе с вложенными циклами.

Путь обновления

Запустите помощник по миграции на вашей кодовой базе, чтобы найти примеры этих переменных, которые удаляются. вы также должны увидеть консольные ошибки, такие как: «Uncaught ReferenceError: $ index не определен», если вы пропустите ни одной.

трек ^{заменен}

ключ заменил track-by, ключ работает как любой другой атрибут: без префикса v-bind: или: он будет обрабатываться как буквенная строка. В большинстве случаев вы хотели бы использовать динамическое связывание, которое ожидает полное выражение, а не ключ. Например, вместо:

<div v-for="item in items" track-by="id">

Теперь вы напишите:

<div v-for="item in items" v-bind:key="item.id">

Путь обновления

Пожалуйста, запустите помощник по миграции на вашей базе кода, чтобы найти примеры отслеживания.

Значения диапазона v-for ^{изменены}

В предыдущих версиях v-for = "число в 10" будет иметь номер, начинающийся с 0 и заканчивающийся на 9. Теперь он будет начинаться с 1 и заканчиваться на 10.

Путь обновления

Найдите в своем коде регулярное выражение // w + in / d + /. Во всех местах, где он появляется в v-for, проверьте, можете ли вы быть затронуты.

Реквизит

опция принудительной поддержки ^{удалена}

Если вам нравится приводить реквизит, вместо этого установите локальное вычисленное значение на его основе. Например, а не:

props: {
  username: {
    type: String,
    coerce: function (value) {
      return value
        .toLowerCase()
        .replace(/\s+/, '-')
    }
  }
}

Вместо этого вы можете написать:

props: {
  username: String,
},
computed: {
  normalizedUsername: function () {
    return this.username
      .toLowerCase()
      .replace(/\s+/, '-')
  }
}

Преимущества:

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

Путь обновления

Вы должны запустить помощника по миграции на своей базе кода, чтобы найти примеры опции coerce.

Опция TwoWay Prop ^{удалена}

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

Путь обновления

Вы должны запустить помощника по миграции на своей базе кода, чтобы найти примеры опции twoWay.

.Once и .sync Модификаторы на У-BIND ^{удалены}

Путь обновления

Запустите помощник по миграции на вашей кодовой базе, чтобы найти примеры модификаторов.sync и .once.

Опора Мутация ^{устарела}

Теперь это считается анти-паттерном для локального изменения проповеди, например, объявив опору и установив this.myProp = 'someOtherValue' в компоненте. В результате нового механизма рендеринга каждый раз, когда родительский компонент перерисовывается, локальные изменения дочернего компонента перезаписываются.

В большинстве случаев использования мутации опоры можно заменить одним из следующих вариантов:

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

Путь обновления

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

Реквизит на корневой инстанс ^{заменен}

вы должны использовать propsData вместо props в корневых экземплярах Vue (т.е. экземплярах, созданных с новым Vue ({...})),

Путь обновления

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

Вычисленные свойства

кеш: ложно ^{устарел}

Аннулирование кэширования вычисленных свойств будет удалено в будущих основных версиях Vue. Замените все некэшированные вычисляемые свойства методами, это будет иметь тот же результат.

Например:

template: '<p>message: {{ timeMessage }}</p>',
computed: {
  timeMessage: {
    cache: false,
    get: function () {
      return Date.now() + this.message
    }
  }
}

Или используя компонентные методы:

template: '<p>message: {{ getTimeMessage() }}</p>',
methods: {
  getTimeMessage: function () {
    return Date.now() + this.message
  }
}

Путь обновления

Чтобы найти примеры опции cache: false, запустите помощник по миграции на своей базе кода.

Встроенные директивы

Truthiness / Falsiness с треугольным затруднительным ^{изменен}

Когда вы используете v-bind, теперь вы получаете только ложные значения: null, undefined и false. Это означает, что пустые строки и 0 будут отображаться как правдивые. Таким образом, v-bind: draggable = "''" будет отображаться как draggable = "true".

В случае перечисляемых атрибутов, в дополнение к ложным значениям, указанным выше, строка «false» также будет отображаться как attr = «false».

Следует отметить, что для других директив (например, v-if и v-show) нормальная истинность JavaScript все еще применяется.

Путь обновления

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

Прослушивание собственных событий на компонентах с ^{измененным} v-on

Теперь, когда v-on используется для компонента, он только прослушивает пользовательские события $, испускаемые этим компонентом. Используйте модификатор .native для прослушивания собственного события DOM в корневом элементе. Например:

<my-component v-on:click.native="doSomething"></my-component>

Путь обновления

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

дребезга Param Атрибут для у-моделей ^удален

мы используем debouncing, чтобы ограничить частоту выполнения Ajax-запросов и любых других дорогостоящих операций. Параметр атрибута Vue debounce для v-модели сделал это простым для случаев, которые очень просты, но это фактически отклоняло обновления состояния, а не сами дорогостоящие операции. Это тонкое различие, но по мере роста приложения оно имеет ограничения.

Эти ограничения становятся более очевидными при разработке поискового индикатора, например, такого:

Не может быть никакого способа обнаружить состояние «Typing» при использовании атрибута debounce, это потому, что мы теряем доступ к состоянию ввода в реальном времени. Однако, отделив функцию debounce от Vue, мы можем отменить только ту операцию, которую хотим ограничить, тем самым сняв ограничения на функции, которые мы можем разработать:

<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
<div id="debounce-search-demo">
  <input v-model="searchQuery" placeholder="Type something">
  <strong>{{ searchIndicator }}</strong>
</div>
new Vue({
  el: '#debounce-search-demo',
  data: {
    searchQuery: '',
    searchQueryIsDirty: false,
    isCalculating: false
  },
  computed: {
    searchIndicator: function () {
      if (this.isCalculating) {
        return '? Fetching new results'
      } else if (this.searchQueryIsDirty) {
        return '... Typing'
      } else {
        return '? Done'
      }
    }
  },
  watch: {
    searchQuery: function () {
      this.searchQueryIsDirty = true
      this.expensiveOperation()
    }
  },
  methods: {
    // This is where the debounce will actually belongs.
    expensiveOperation: _.debounce(function () {
      this.isCalculating = true
      setTimeout(function () {
        this.isCalculating = false
        this.searchQueryIsDirty = false
      }.bind(this), 1000)
    }, 500)
  }
})

Еще одним преимуществом этого подхода является то, что в некоторых случаях debouncing - не совсем подходящая функция-обертка. Например, когда мы запускаем API для предложений поиска, ожидание предложения предложений до тех пор, пока пользователь не перестанет набирать текст в течение определенного периода времени, не является идеальным опытом. То, что вы, вероятно, хотите вместо этого, является функцией регулирования. Теперь, поскольку вы уже используете служебную библиотеку, такую как lodash, рефакторинг для использования ее функции throttle занимает всего несколько секунд.

Путь обновления

Чтобы найти примеры атрибута debounce, запустите помощник по миграции на своей базе кода.

ленивые или числовые атрибуты Param для v-модели ^{заменены}

Атрибуты number param и lazy теперь являются модификаторами, чтобы было понятнее, что это значит, а не:

<input v-model="name" lazy>
<input v-model="age" type="number" number>

Вы будете использовать:

<input v-model.lazy="name">
<input v-model.number="age" type="number">

Путь обновления>

Чтобы найти примеры этих атрибутов параметров, запустите помощник по миграции на своей кодовой базе.

Атрибут значения с ^{удаленной} v-моделью

v-модель больше не будет заботиться о начальном значении атрибута встроенного значения. вместо этого он всегда обрабатывает данные экземпляра Vue как источник правды.

Это означает, что этот элемент:

<input v-model="text" value="foo">```
When backed by this data:
```data: {
  text: 'bars'
}```
will render with a value of ?bars? instead of "foo". This also goes for a <textarea> with existing content. Rather than:
```<textarea v-model="text">
  hello world
</textarea>

Вы должны убедиться, что ваше начальное значение для текста - «Привет, мир».

Путь обновления

После обновления запустите комплексный набор тестов или приложение и найдите предупреждения консоли об атрибутах встроенных значений с помощью v-модели.

v-модель с ^{удаленными} v-для повторяющихся значений примитивов

Случаи, подобные приведенному ниже, больше не работают:

<input v-for="str in strings" v-model="str">

Причина этого в том, что это эквивалентный JavaScript, который <input> будет компилировать в:

strings.map(function (str) {
  return createElement('input', ...)
})

Можно видеть, что двустороннее связывание v-модели здесь не имеет смысла. Установка str в другое значение в функции итератора ничего не даст, потому что это только локальная переменная в области действия функции.

скорее, рекомендуется использовать массив объектов, чтобы v-модель могла обновлять поле объекта. Например:

<input v-for="obj in objects" v-model="obj.str">

Путь обновления

Если у вас есть набор тестов, запустите его. Проведенные тесты должны предупредить вас обо всех частях вашего приложения, которые могут быть затронуты этим изменением.

v-bind: стиль с ^{удаленным} синтаксисом объекта и! важный

Это больше не работает:

<p v-bind:style="{ color: myColor + ' !important' }">hello</p>

Если вы действительно должны переопределить другой! Важный, то вы должны использовать строковый синтаксис:

<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>

Путь обновления

Чтобы найти примеры привязок стилей с помощью! Important в объектах, запустите помощник по миграции в своей кодовой базе.

v-el и v-ref ^{заменены}

Для простоты, v-ref и v-el были объединены в атрибут ref, который доступен в экземпляре компонента через $ refs. Это означает, что v-el: my-element станет ref = "myElement", а v-ref: my-component станет ref = "myComponent". Когда мы используем это на обычном элементе, ссылка становится элементом DOM, а когда мы используем это на компоненте, ссылка становится экземпляром компонента.

Поскольку v-ref больше не является директивой, а скорее специальным атрибутом, его можно определять динамически. Это особенно полезно при использовании в сочетании с v-for. Например:

<p v-for="item in items" v-bind:ref="'item' + item.id"></p>

Ранее, когда v-el / v-ref комбинировался с v-for, он создавал массив элементов / компонентов, потому что не было никакого способа дать каждому элементу уникальное имя. Это поведение все еще может быть достигнуто путем присвоения каждому элементу одинаковых ссылок:

<p v-for="item in items" ref="items"></p>

В отличие от версии 1.x, $ refs в 2.x не являются реактивными, потому что они регистрируются / обновляются во время самого процесса рендеринга. Чтобы сделать их реагирующими, для каждого изменения потребовались бы повторяющиеся рендеры.

$ refs С другой стороны, они предназначены в основном для программного доступа в JavaScript - не рекомендуется полагаться на $ refs в шаблонах, поскольку это будет означать ссылку на состояния, которые не принадлежат самому экземпляру. Это нарушило бы управляемую данными модель представления Vue.

Путь обновления

Чтобы найти примеры v-el и v-ref, запустите помощник по миграции на вашей кодовой базе.

v-else с ^{удаленным} v-show

V-else больше не работает с v-show. Вместо этого используйте v-if с выражением отрицания. Пример, показанный ниже, неверен:

<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>

Вы должны использовать:

<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>

Путь обновления

Чтобы найти примеры использования v-else с помощью v-show, запустите помощник по миграции на своей кодовой базе.

Таможенные директивы ^{упрощены}

Директивы теперь значительно сократили сферу ответственности: теперь они используются только для применения низкоуровневых прямых DOM-манипуляций. В большинстве случаев вы должны использовать компоненты в качестве основной абстракции повторного использования кода.

Некоторые из наиболее заметных отличий в упрощенных директивах включают в себя:

Директивы больше не имеют экземпляров. Это означает, что внутри директивных зацепок больше нет. скорее они получают все, что им может понадобиться в качестве аргументов. Если вы должны сохранить состояние через крючки, вы можете сделать это на эл.
Такие параметры, как acceptStatement, priority, deep и т. Д., Были удалены. Чтобы заменить двухсторонние директивы.
Некоторые из текущих хуков имеют другое поведение, и есть также пара новых хуков.

К счастью, поскольку новые директивы намного проще, вы можете справиться с ними гораздо проще.

Путь обновления

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

Директива .Литеральный модификатор ^удален

Модификатор .literal больше не существует, так как его легко достичь, указав в качестве значения строковый литерал.

Например, вы можете обновить:

<p v-my-directive.literal="foo bar baz"></p>

чтобы:

<p v-my-directive="'foo bar baz'"></p>

Путь обновления

Чтобы найти примеры модификатора `.literal` в директиве, запустите помощник по миграции на вашей базе кода.

Переходы

Атрибут перехода ^{заменен}

Система перехода Vue изменилась довольно сильно, и теперь она использует элементы-обертки <transition> и <transition-group>, а не атрибут перехода. Прочитайте новое руководство по переходам, чтобы узнать больше.

Путь обновления

Чтобы найти примеры атрибута перехода, запустите помощник по миграции на своей кодовой базе.

Vue.transition для многократного использования переходов ^{заменить}

Теперь вы можете использовать компоненты для многоразовых переходов с новой системой переходов.

Путь обновления

Чтобы найти примеры Vue.transition, запустите помощник по миграции на вашей кодовой базе.

Атрибут смещения перехода ^удален

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

Путь обновления

Запустите помощник по миграции на вашей кодовой базе, чтобы найти примеры атрибута перехода. Во время вашего обновления вы также можете перейти (капризный каламбур) к новой ошеломляющей стратегии.

События

опция событий удалена

Опция событий больше не существует. Теперь обработчики событий должны быть зарегистрированы в созданном хуке. Обратитесь к руководству по миграции $ dispatch и $ broadcast для подробного примера.

Vue.directive ('on'). Ключевые коды ^{заменены}

Новый и более краткий способ настройки keyCodes - через Vue.config.keyCodes. например:

// enable v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

Путь обновления

Чтобы найти примеры старого синтаксиса конфигурации keyCode, запустите помощник по миграции на вашей кодовой базе.

$ рассылка и $ трансляция заменены

$ dispatch и $ broadcast были удалены, чтобы обеспечить более явную межкомпонентную связь, а также более управляемые решения для управления состоянием, такие как Vuex.

Проблема заключается в том, что потоки событий, которые зависят от древовидной структуры компонента, трудно рассуждать и настолько хрупки, когда дерево становится большим. Они плохо масштабируются и только настраивают вас на серьезную боль позже. А также $ dispatch и $ broadcast не решают связь между одноуровневыми компонентами.

Одно из наиболее распространенных применений, которое вы увидите для этих методов, - это когда мы хотим общаться между родителем и его непосредственными потомками. В таких случаях вы можете прослушивать событие $ emit от ребенка с v-on. Это позволит вам сохранить удобство событий с добавленной явностью.

Когда мы хотим общаться между далекими потомками / предками, в таких случаях $ emit вам не поможет. Вместо $ emit самое простое возможное обновление - использовать централизованный концентратор событий. Это дает дополнительное преимущество, заключающееся в том, что вы можете обмениваться данными между компонентами, независимо от того, где они могут находиться в дереве компонентов, что включает в себя связь между братьями и сестрами! Поскольку экземпляры Vue будут реализовывать интерфейс генератора событий, для этой цели вы также можете использовать пустой экземпляр Vue.

Возьмем, к примеру, скажем, у нас есть приложение todo, которое имеет следующую структуру:

Todos
+- NewTodoInput
+- Todo
   +- DeleteTodoButton

Мы могли бы управлять связью между компонентами с помощью этого единственного концентратора событий:

// This is the event hub we will use in 
// every component to communicate between them.
var eventHub = new Vue()

Теперь в наших компонентах мы можем использовать $ on, $ emit, $ off для генерации событий, прослушивания событий, а также для очистки слушателей событий соответственно:

// NewTodoInput
// ...
methods: {
  addTodo: function () {
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
  }
}
// DeleteTodoButton
// ...
methods: {
  deleteTodo: function (id) {
    eventHub.$emit('delete-todo', id)
  }
}
// Todos
// ...
created: function () {
  eventHub.$on('add-todo', this.addTodo)
  eventHub.$on('delete-todo', this.deleteTodo)
},
// It is good to clean up event listeners
// before a component is destroyed.
beforeDestroy: function () {
  eventHub.$off('add-todo', this.addTodo)
  eventHub.$off('delete-todo', this.deleteTodo)
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (todoId) {
    this.todos = this.todos.filter(function (todo) {
      return todo.id !== todoId
    })
  }
}

Показанный выше шаблон может служить заменой для $ dispatch и $ broadcast в простых сценариях, но для сложных случаев рекомендуется использовать выделенный уровень управления состоянием, такой как Vuex.

Путь обновления

Чтобы найти примеры $ dispatch и $ broadcast, запустите помощник по миграции на своей кодовой базе.

фильтры

Фильтры вне текстовой интерполяции удалены

Теперь фильтры можно использовать только внутри текстовых интерполяций (теги {{}}). В прошлом мы обнаружили, что использование фильтров в директивах, таких как v-модель, v-on и т. Д., Привело нас к большей сложности, чем к удобству. Для фильтрации списков в v-for лучше также переместить эту логику в JavaScript как вычисляемые свойства, чтобы вы могли повторно использовать ее во всем компоненте.

Как правило, всякий раз, когда мы можем достичь чего-то в простом JavaScript, мы хотим избегать введения специального синтаксиса, такого как фильтры, для решения той же проблемы. Вот как вы можете заменить встроенные фильтры директив Vue:

Замена фильтра отказов

Вместо того, чтобы использовать:

<input v-on:keyup="doStuff | debounce 500">
methods: {
  doStuff: function () {
    // ...
  }
}

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

<input v-on:keyup="doStuff">
methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
}

Замена фильтра limitBy

Вместо того, чтобы использовать:

<p v-for="item in items | limitBy 10">{{ item }}</p>

Используйте встроенный метод JavaScript .slice в вычисляемом свойстве:

<p v-for="item in filteredItems">{{ item }}</p>
computed: {
  filteredItems: function () {
    return this.items.slice(0, 10)
  }
}

Замена фильтра Фильтром

Вместо того, чтобы писать это:

<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>

Вы можете использовать встроенный в JavaScript метод .filter в вычисляемом свойстве:

<p v-for="user in filteredUsers">{{ user.name }}</p>
computed: {
  filteredUsers: function () {
    var self = this
    return self.users.filter(function (user) {
      return user.name.indexOf(self.searchQuery) !== -1
    })
  }
}

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

var self = this
self.users.filter(function (user) {
  var searchRegex = new RegExp(self.searchQuery, 'i')
  return user.isActive && (
    searchRegex.test(user.name) ||
    searchRegex.test(user.email)
  )
})

Замена заказа Фильтром

Скорее, чем:

<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>

Вы можете использовать lodash orderBy (или, возможно, sortBy) в вычисляемом свойстве:

<p v-for="user in orderedUsers">{{ user.name }}</p>
computed: {
  orderedUsers: function () {
    return _.orderBy(this.users, 'name')
  }
}

Вы также можете заказать по нескольким столбцам:

_.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])

Путь обновления

Чтобы найти примеры фильтров, используемых внутри директив, запустите помощник по миграции на вашей кодовой базе. В случае, если вы пропустите какой-либо, вы также должны получить ошибки консоли.

Синтаксис аргумента фильтра изменен

Синтаксис фильтров для аргументов теперь лучше согласован с вызовом функции JavaScript. Поэтому вместо того, чтобы принимать аргументы, разделенные пробелами:

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>

Мы можем заключить аргументы в круглые скобки, а затем разделить аргументы запятыми:

<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>

Путь обновления

Чтобы найти примеры старого синтаксиса фильтра, запустите помощник по миграции на вашем codebase.you получит консольные ошибки, если вы пропустите какие-либо.

Встроенные текстовые фильтры ^{удалены}

Хотя фильтры, которые находятся в текстовой интерполяции, все еще разрешены, следует отметить, что все фильтры были удалены. Вместо этого рекомендуется использовать более специализированные библиотеки для решения проблем в каждом домене (например, date-fns для форматирования дат и учета валют).

Для каждого из встроенных текстовых фильтров Vue ниже мы рассмотрим, как их заменить. Пример кода ниже может существовать в пользовательских вспомогательных функциях, методах или вычисляемых свойствах.

Замена фильтра JSON

На самом деле вам больше не нужна отладка, потому что по умолчанию Vue автоматически форматирует вывод для вас, будь то строка, число, массив или простой объект. Если вы хотите использовать ту же функциональность, что и JSON.stringify в JavaScript, вы можете использовать ее в вычисляемом свойстве или методе.

Замена фильтра с заглавной буквы

text [0] .toUpperCase () + text.slice (1)

Замена фильтра в верхнем регистре

text.toUpperCase ()

Замена строчного фильтра

text.toLowerCase ()

Замена фильтра множественного числа

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

function pluralizeKnife (count) {
  if (count === 0) {
    return 'no knives'
  } else if (count === 1) {
    return '1 knife'
  } else {
    return count + 'knives'
  }
}

Замена валютного фильтра

Очень наивный подход для реализации этого, как показано ниже:

'$' + price.toFixed(2)

Во многих случаях вы по-прежнему сталкиваетесь со странным поведением (например, 0,035.toFixed (2) округляет до 0,04 и 0,045 округляет до 0,04). Вы можете использовать библиотеку учета для более надежного форматирования валют и, таким образом, обойти эту проблему.

Путь обновления

Чтобы найти примеры устаревших текстовых фильтров, запустите помощник по миграции на базе кода. Вы получите консольные ошибки, если пропустите.

Двусторонние фильтры ^{заменены}

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

Путь обновления

Чтобы найти примеры фильтров, используемых в директивах, таких как v-model, запустите помощник по миграции на вашей кодовой базе. Если вы что-то пропустили, вы также должны увидеть ошибки консоли.

игровые автоматы

Дубликаты слотов удалены

Наличие <slot> с одинаковым именем в одном шаблоне больше не поддерживается. Всякий раз, когда рендерится слот, он «израсходован», и мы не можем рендерить его где-либо еще в том же дереве рендеринга. Пропустите контент как реквизит, если вам придется рендерить его несколько раз.

Путь обновления

Ищите консольные предупреждения о дубликатах v-модели слотов после запуска полного набора тестов или после обновления приложения.

Слот атрибутов слота ^удален

Контент, вставленный с именем <slot>, больше не будет сохранять атрибут slot. Вы должны использовать элемент-оболочку для их стилизации или модифицировать вставленный контент программно, используя функции рендеринга для расширенных случаев использования.

Путь обновления

Чтобы найти CSS-селекторы, нацеленные на именованные слоты (например, [slot = "my-slot-name"]). запустите помощника по миграции на вашей кодовой базе.

Специальные атрибуты

атрибут keep-alive заменен

Keep-alive больше не является специальным атрибутом, теперь он является компонентом-оберткой, он похож на <transition>. Например:

<keep-alive>
  <component v-bind:is="view"></component>
</keep-alive>

Это позволяет использовать <keep-alive> для нескольких условных потомков:

<keep-alive>
  <todo-list v-if="todos.length > 0"></todo-list>
  <no-todos-gif v-else></no-todos-gif>
</keep-alive>

Когда у <keep-alive> есть несколько детей, дети должны в конечном итоге оценить одного ребенка. Любой ребенок, кроме первого, будет проигнорирован.

Когда <keep-alive> используется вместе с <transition>, обязательно вложите <keep-alive> внутрь:

<transition>
  <keep-alive>
    <component v-bind:is="view"></component>
  </keep-alive>
</transition>

Путь обновления

Чтобы найти атрибуты keep-alive, запустите помощник по миграции на своей кодовой базе.

интерполирование

Интерполяция внутри атрибутов удалена

Интерполяция внутри атрибутов больше не действительна. Например:

<button class="btn btn-{{ size }}"></button>

Должен ли быть обновлен либо использовать встроенное выражение:

<button v-bind:class="'btn btn-' + size"></button>

Или данные / вычисляемое свойство:

<button v-bind:class="buttonClasses"></button>
computed: {
  buttonClasses: function () {
    return 'btn btn-' + size
  }
}

Путь обновления

Чтобы найти примеры интерполяции, используемой в атрибутах, запустите помощник по миграции на вашей кодовой базе.

HTML-интерполяция ^{удалена}

HTML-интерполяции ({{{foo}}}) были удалены в пользу директивы v-html.

Путь обновления

Чтобы найти HTML-интерполяции, запустите помощник по миграции на вашей кодовой базе.

Одноразовые привязки заменены

Одноразовые привязки ({{* foo}}) были заменены новой директивой v-Once.

Путь обновления

Чтобы найти одноразовые привязки, запустите помощник по миграции на своей кодовой базе.

Реактивность

часы vm. $ ^{изменены}

Наблюдатели, созданные с помощью vm. $ Watch, теперь запускаются до перерисовки связанного компонента. Это даст вам возможность дополнительно обновить состояние до повторного рендеринга компонента, тем самым избегая ненужных обновлений. Например, вы можете наблюдать за подпоркой компонента и обновлять собственные данные компонента при каждом изменении подпорки.

Если вы ранее полагались на vm. $ Watch, чтобы что-то делать с DOM после обновления компонента, вы можете вместо этого сделать это в обновленном хуке жизненного цикла.

Путь обновления

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

набор vm. $ ^{изменен}

Набор vm. $ Теперь является псевдонимом для Vue.set.

Путь обновления

Чтобы найти примеры устаревшего использования, запустите помощник по миграции на своей базе кода.

vm. $ delete ^{изменено}

Vm. $ Delete теперь является псевдонимом Vue.delete.

Путь обновления

Чтобы найти примеры устаревшего использования, запустите помощник по миграции на своей базе кода.

Array.prototype. $ Set ^удален

Вместо этого вы должны использовать Vue.set.

Путь обновления

Чтобы найти примеры. $, Установленного в массиве, запустите помощник по миграции на вашей кодовой базе.

Array.prototype. $ Remove ^{удалено}

Вместо этого вы должны использовать Array.prototype.splice. Например:

methods: {
  removeTodo: function (todo) {
    var index = this.todos.indexOf(todo)
    this.todos.splice(index, 1)
  }
}```
Or better yet, pass removal methods an index:
```methods: {
  removeTodo: function (index) {
    this.todos.splice(index, 1)
  }
}

Путь обновления

Чтобы найти примеры. $ Remove для массива, запустите помощник по миграции на вашей кодовой базе. Вы получите предупреждение консоли, если вы пропустите.

Vue.set и Vue.delete для экземпляров Vue ^{удалены}

Vue.set и Vue.delete больше не работают на экземплярах Vue. Теперь обязательно правильно объявить все реактивные свойства верхнего уровня в опции данных. Если вы хотите удалить свойства экземпляра Vue или его $ data, установите для него значение null.

Путь обновления

Чтобы найти примеры Vue.set или Vue.delete для экземпляра Vue, запустите помощник по миграции на базе кода. Они будут вызывать предупреждения консоли, если вы пропустите.

Замена vm. $ Data ^{удалена}

Теперь вам запрещено заменять корневые $ data экземпляра компонента. Это предотвратит некоторые крайние случаи в системе реактивности и сделает состояние компонента более предсказуемым (особенно в системах с проверкой типов).

Путь обновления

Чтобы найти примеры перезаписи данных vm. $, Запустите помощник по миграции на своей базе кода. Предупреждения консоли будут выдаваться, если вы пропустите.

vm. $ ^{удалить}

Получите реактивные данные напрямую вместо этого.

Путь обновления

Чтобы найти примеры vm. $ Get, запустите помощник по миграции на своей базе кода. Вы увидите ошибки консоли, если пропустите.

DOM-ориентированные методы экземпляра

vm. $ append для ^{удаления}

Вы должны использовать нативный DOM API:

myElement.appendChild(vm.$el)

Путь обновления

Чтобы найти примеры vm. $ AppendTo, запустите помощник по миграции на вашей кодовой базе. вы увидите ошибки консоли, если пропустите.

vm. $ перед ^{удалением}

Вы должны использовать нативный DOM API:

myElement.parentNode.insertBefore(vm.$el, myElement)

Путь обновления

Чтобы найти примеры vm. $ Ранее, запустите помощник по миграции на вашей кодовой базе. вы увидите ошибки консоли, если пропустите.

vm. $ после ^{удаления}

Вы должны использовать нативный DOM API:

myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)

Или, если myElement - последний потомок, используйте:

myElement.parentNode.appendChild(vm.$el)

Путь обновления

Чтобы найти примеры vm. $ After, запустите помощник по миграции на своей базе кода. вы увидите ошибки консоли, если пропустите.

vm. $ удалить ^{удалено}

Вы должны использовать нативный DOM API:

vm.$el.remove()

Путь обновления

Чтобы найти примеры vm. $ El.remove (), запустите помощник по миграции на вашей кодовой базе. вы увидите ошибки консоли, если пропустите.

Методы экземпляра

vm. $ eval ^{удалено}

Там нет реального использования.

Путь обновления

Чтобы найти примеры vm. $ Eval, запустите помощник по миграции на вашей кодовой базе. вы увидите ошибки консоли, если пропустите.

^{удалена} интерполяция vm. $

это не имеет никакого реального смысла.

Путь обновления

Чтобы найти примеры vm. $ Interpolate, запустите помощник по миграции на вашей кодовой базе. вы увидите ошибки консоли, если пропустите.

vm. $ log ^{удалено}

Пожалуйста, используйте Vue Devtools для оптимального опыта отладки.

Путь обновления

Чтобы найти примеры vm. $ Log, запустите помощник по миграции на вашей кодовой базе. вы увидите ошибки консоли, если пропустите.

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

заменить: ложь ^{удалена}

Компоненты теперь всегда заменяют элемент, с которым они связаны. Чтобы вы имитировали поведение replace: false, вы можете обернуть свой корневой компонент элементом, похожим на тот, который вы заменяете. Например:

new Vue({
  el: '#app',
  template: '<div id="app"> ... </div>'
})

Или с функцией рендеринга:

new Vue({
  el: '#app',
  render: function (h) {
    h('div', {
      attrs: {
        id: 'app',
      }
    }, /* ... */)
  }
})

Путь обновления

Чтобы найти примеры замены: false, запустите помощник по миграции на вашей кодовой базе.

Глобал Конфиг

Vue.config.debug ^удален

Больше не нужно, так как предупреждения теперь идут с трассировкой стека по умолчанию.

Путь обновления

Чтобы найти примеры Vue.config.debug, запустите помощник по миграции на вашей кодовой базе.

Vue.config.async ^удален

Async теперь требуется для производительности рендеринга.

Путь обновления

Чтобы найти примеры Vue.config.async, запустите помощник по миграции на вашей кодовой базе.

Vue.config.delimiters ^{заменить}

Это было переработано как опция уровня компонента. Это позволит вам использовать альтернативные разделители в вашем приложении, не нарушая сторонние компоненты.

Путь обновления

Чтобы найти примеры Vue.config.delimiters, запустите помощник по миграции на вашей кодовой базе.

Vue.config.unsafeDelimiters ^{удалено}

HTML-интерполяция была удалена в пользу v-html.

Путь обновления

Чтобы найти примеры Vue.config.unsafeDelimiters, запустите помощник по миграции на своей базе кода.

После этого помощник также найдет экземпляры HTML-интерполяции, чтобы вы могли заменить их на `v-html`.

Глобальный API

Vue.extend с ^{удаленным} el

Вы больше не можете использовать опцию el в Vue.extend. Он действителен только в качестве опции создания экземпляра.

Путь обновления

Запустите ваше приложение после обновления или комплексный набор тестов, а затем найдите консольные предупреждения о параметре el с помощью Vue.extend.

Vue.elementDirective ^удален

Пожалуйста, используйте компоненты вместо.

Путь обновления

Чтобы найти примеры Vue.elementDirective, запустите помощник по миграции на вашей кодовой базе.

Vue.partial ^удален

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

Если вы уже используете частичные компоненты в критически важной для вашего приложения части приложения, рекомендуется выполнить обновление до функциональных компонентов. Компоненты должны быть в простом файле JS / JSX (а не в файле .vue) и не иметь экземпляров и не иметь состояния, как частичные. Это сделает рендеринг чрезвычайно быстрым.

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

Путь обновления

Чтобы найти примеры Vue.partial, запустите помощник по миграции на вашей кодовой базе.