Обзор

На конференции Vue.js в Лондоне 30 сентября автор Юси Ю представил контент, который будет выпущен в следующей версии Vue, а также путь разработки Vue 3.0 и разработку последующих версий. Хотя официальная версия Vue 3.0 еще не выпущена, уже выпущен vue-cli, инструмент для быстрого создания проектов vue.Мы можем узнать о vue 3.0 через vue-cli.

Как основная версия Vue, Vue 3.0 вносит множество критических изменений, однако команда разработчиков также очень серьезно относится к проблемам совместимости: все, кроме API функции рендеринга и синтаксиса слота с областью действия, останется прежним или с помощью сборок совместимости сохранит его совместимость. с 2.х. В целом, Vue 3.0 по-прежнему будет поддерживать совместимость с 2.x, хотя в API верхнего уровня будут внесены серьезные изменения. Кроме того, последний второстепенный выпуск 2.x будет LTS, и после выпуска 3.0 в течение 18 месяцев будут выпускаться обновления ошибок и исправлений безопасности.

Для получения более подробной информации перейдите по следующим ссылкам:План выпуска Vue 3.0

рефакторинг

структура кода

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

Как упоминалось ранее, команда Vue намеревается написать версию 3.0 с нуля, чтобы «достичь более чистой и удобной в сопровождении архитектуры, особенно для упрощения добавления кода». Чтобы уменьшить сложность и изолировать сложность, команда разработчиков разделила некоторые внутренние функции на отдельные пакеты. Например, модуль наблюдателя будет отдельным пакетом со своим внешним API и собственными тест-кейсами.

Кроме того, кодовая база теперь вместо этого написана на TypeScript, и, хотя это сделало бы «знание TypeScript» обязательным условием для участия в новых кодовых базах, мы считаем, что наличие информации о типах наряду с поддержкой IDE облегчает для нового участника работу. Сказать, что на самом деле легче внести значимый вклад.

В дополнение к этому, Vue также внесла улучшения в компилятор, поддержку IE 11, другие улучшения среды выполнения и улучшенные механизмы наблюдения.

Механизм мониторинга

3.0 принесет реализацию наблюдателя на основе прокси, которая обеспечивает реактивность во всем диапазоне языков (JavaScript — аннотация), сняв некоторые ограничения на основе Object.defineProperty текущей серии Vue 2, в том числе:

• Контроль добавления и удаления атрибутов;
• Модификация массивов на основе индексов, мониторинг модификаций .length;
• Поддержка Map, Set, WeakMap и WeakSet;

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

• Открытый API для создания наблюдаемых: Это обеспечивает легкое и чрезвычайно простое решение для управления состоянием между компонентами для приложений малого и среднего размера.
• По умолчанию используется Ленивое наблюдение. В версии 2.x любые реактивные данные, независимо от их размера, будут проверяться на работоспособность при запуске. Если объем данных велик, это может серьезно снизить производительность при запуске приложения. В версии 3.x будут отслеживаться только данные, используемые изначально видимой частью приложения, не говоря уже о том, что сама схема мониторинга на самом деле быстрее.

Более точные уведомления об изменениях: Например: в серии 2.x форсирование нового свойства через Vue.set приведет к однократному выполнению всех функций наблюдения, которые зависят от этого объекта, тогда как в 3.x будут выполняться только те, которые зависят от этого конкретного объекта. выполняется один раз. Функция наблюдения за свойством будет уведомлена.

Неизменяемые пары мониторингаСлон: Мы можем создать «неизменяемую» версию объекта, которая предотвращает его изменение, включая его вложенные свойства, если только это ограничение не будет временно снято системой. Этот механизм можно использовать для замораживания объектов, переданных свойствам компонента и дереву состояний Vuex за пределами области мутации.

• Улучшенные возможности отладки: Используя новые хуки renderTracked и renderTriggered, мы можем точно отслеживать, когда компонент выполняет повторную визуализацию триггера и завершается, а также почему.

  

переводчик

Vue 3.0 будет иметь большое улучшение в компиляции кода, связанного с компилятором, которое можно резюмировать в одном предложении: "удобный для дерева" вывод; больше AOT-оптимизаций; лучший синтаксический анализ ошибок; поддержка исходных карт.

• Если используется упаковщик, который поддерживает «оптимизацию встряхивания дерева», дополнительные функции, используемые в шаблоне, будут импортированы с помощью синтаксиса модуля ES в сгенерированном коде; в упакованном файле эти неиспользуемые функции будут импортированы. вне".
• Благодаря улучшениям, внесенным новой реализацией виртуального DOM, мы можем выполнять некоторые более эффективные оптимизации времени компиляции, такие как подъем статического дерева, подъем статического реквизита; подсказки компилятора, позволяющие избежать нормализации дочерних элементов; предоставление VNodes для быстрого создания путей и т. д.
• Синтаксический анализатор переписан таким образом, что при возникновении ошибки при компиляции шаблона он может предоставить информацию о местоположении ошибки; кроме того, он также может обеспечить поддержку исходной карты для шаблона; он также может поддерживать сторонние инструменты, такие как eslint -plugin-vue и функции языковых служб IDE.

IE11-совместимый

Новая кодовая база в настоящее время предназначена только для основных браузеров, и мы предполагаем, что все они поддерживают ES2015. Но эй, мы также знаем, что есть много пользователей, которым все еще нужно будет поддерживать IE11 в обозримом будущем. За исключением прокси-сервера, большинство функций ES2015 можно использовать в IE11 с помощью транспиляции или оболочек. Наш план состоит в том, чтобы реализовать отдельный альтернативный наблюдатель с тем же API, но на основе старого API Object.defineProperty, а затем выпустить его, создав отдельную версию (сборку) Vue 3.x, которая использует эту реализацию, но эту отдельную версию. Vue 2.x по-прежнему имеет проблему обнаружения изменений в Vue 2.x, поэтому эта версия не полностью совместима с 3.x. Мы также понимаем, что это вызовет некоторые неудобства у авторов сторонних библиотек, поскольку им необходимо учитывать проблемы совместимости между двумя разными версиями, но когда мы перейдем к этому этапу, мы обязательно предоставим четкое руководство.

Конечно, Vue 3.0 все еще находится в стадии разработки, и самый ранний релиз подождет до 2019 года, давайте подождем и увидим.

vue-cli 3.0

vue-cli — это инструмент сборки для быстрой разработки проектов vue, запущенный официальной командой vue.Он имеет такие функции, как готовое использование и простая пользовательская настройка. vue-cli многое изменил с 2.0 на 3.0, давайте посмотрим на это ниже.

Создать проект

Начиная с vue-cli 3.0, команда установки vue была изменена с vue-cli на @vue/cli. Например:

npm install -g @vue/cli

Команда для создания проекта с vue-cli 3.0 выглядит следующим образом:

vue create my-project

Помимо создания команд, в версии 3.0 также добавлена ​​функция создания графического интерфейса и управления vue-проектами. Вы также можете смешивать и сочетать интеграции при создании новых проектов. Когда мы используем команду vue ui, мы можем использовать графический способ управления исходным кодом проекта vue.

Следует отметить, что при инициализации проекта система по умолчанию сгенерирует два конфигурационных файла, package.json и package-lock.json, разница между которыми в том, что package.json может блокировать только основной номер версии, а package- lock.json может заблокировать номер версии пакета во время установки, чтобы обеспечить согласованность номера версии проекта при разработке несколькими людьми. В то же время Vue удалил статический каталог в версии 3.0 и добавил общедоступный каталог, который в основном используется для хранения файлов и ресурсов, не обрабатываемых веб-пакетом.

Когда мы создаем проект с помощью команды create, нас просят что-то выбрать. Например:

Vue CLI v3.0.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features

Версия Vue 3.0 поддерживает предустановленную конфигурацию и пользовательскую конфигурацию, среди которых конфигурация пользовательских функций включает следующие функции:

• TypeScript
• Progressive Web App (PWA) Support
• Router
• Vuex
• CSS Pre-processors
• Linter / Formatter
• Unit Testing
• E2E Testing

Можно обнаружить, что в версии 3.0 недавно добавлена ​​поддержка TypeScript и PWA.

1. После выбора препроцессора CSS вам будет предложено выбрать препроцессор?

• Scss/Sass
• Less
• Stylus

2. Выбор спецификации eslint

• ESLint with error prevention only
• ESLint + Airbnb config
• ESLint + Standard config
• ESLint + Prettier

3. Выберите место хранения для пользовательских конфигураций, таких как Babel, PostCSS, ESLint и т. д.

• In dedicated config files
• In package.json

Структура каталогов

По сравнению с версией Vue 2.0 структура каталогов Vue 3.0 намного проще.Ниже приводится конкретное значение файла проекта Vue и описание его функций.

• node_modules: сторонние модули, от которых зависит проект;
• public: удалите статический каталог, добавьте общедоступный каталог и переместите index.html в public , который в основном используется для хранения статических ресурсов, таких как изображения, шрифты и упакованные файлы;
• src: каталог хранения исходного кода, в основном могут храниться файлы ресурсов и исходный код;
• babelrc: преобразовать код es6 в код, который могут распознать браузеры;
• editorconfig: определяет спецификацию кода проекта, приоритет выше приоритета, установленного компилятором;
• index.html: файл входа в проект, вы можете настроить метаинформацию или статистический код и т. д.;
• package.json: файл конфигурации проекта, который в основном определяет различные зависимые модули, необходимые для проекта, и некоторую информацию о конфигурации проекта;
• package-lock.json: заблокировать номер версии пакета во время установки, который будет использоваться для совместной разработки несколькими людьми;
• webpack.config.js: некоторые конфигурации модульной упаковки webpack;

пользовательская конфигурация

Начиная с версии 3.0, система будет генерировать файл vue.config.js в корневом каталоге проекта, и в этот файл можно добавить некоторые пользовательские конфигурации. Вот некоторые часто используемые пользовательские конфигурации:

module.exports = {
  baseUrl: '/',
  outputDir: 'dist',
  lintOnSave: true,
  compiler: false,
  // 调整内部的 webpack 配置。
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {}
  }
  ....
}

Самый простой способ настроить конфигурацию веб-пакета — предоставить объект в параметре configureWebpack в vue.config.js, который будет объединен с окончательной конфигурацией веб-пакета с помощью webpack-merge. Например:

module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

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

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
  }
}

Следует отметить, что когда мы меняем конфигурацию веб-пакета, мы можем передатьvue inspect > output.jsВыведите полный список конфигурации, обратите внимание, что он выводит не действительный файл конфигурации веб-пакета, а сериализованный формат для просмотра.

ESLint, Babel, список браузеров

• Babel можно настроить с помощью поля babel в .babelrc или package.json.
• ESLint можно настроить с помощью поля eslintConfig в .eslintrc или package.json.
• Поле browserslist в package.json указывает диапазон поддержки целевого браузера для этого проекта.

browserslist

Мы видим поле browserslist в конфигурационном файле package.json. Например:

> 1%
last 2 versions
not ie <= 8

Используйте npx browserslist для проверки браузерной совместимости проекта.Поддержка vue выглядит следующим образом:

публичный каталог

Vue предусматривает, что public/index.html будет обрабатываться плагином html-webpack-plugin в качестве шаблона записи. В процессе сборки ссылки на ресурсы будут вставлены в него автоматически. В дополнение к этому, vue-cli также автоматически вводит подсказки ресурсов (предварительная загрузка/предварительная выборка), вставляет манифест/иконки/ссылки, когда включены плагины PWA, и встраивает манифест времени выполнения/чанка веб-пакета для лучшей производительности.

Ресурсы, на которые ссылаются относительные пути в JavaScript или SCSS, будут обрабатываться веб-пакетом, ресурсы, размещенные в общей папке, могут ссылаться на абсолютные пути, и эти ресурсы будут скопированы без обработки веб-пакетом.

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

новые особенности

Кроме того, Vue-cli предлагает еще две привлекательные функции: поддержку TypeScript и PWA;

Поддержка TypeScript

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

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
const s = Symbol('baz')
@Component
export class MyComponent extends Vue {
 @Emit()
 addToCount(n: number){ this.count += n }
 @Emit('reset')
 resetCount(){ this.count = 0 }
 @Inject() foo: string
 @Inject('bar') bar: string
 @Inject(s) baz: string
 @Model('change') checked: boolean
 @Prop()
 propA: number
 @Prop({ default: 'default value' })
 propB: string
 @Prop([String, Boolean])
 propC: string | boolean
 @Provide() foo = 'foo'
 @Provide('bar') baz = 'bar'
 @Watch('child')
 onChildChanged(val: string, oldVal: string) { }
 @Watch('person', { immediate: true, deep: true })
 onPersonChanged(val: Person, oldVal: Person) { }
}

Приведенный выше код эквивалентен следующему коду:

const s = Symbol('baz')

export const MyComponent = Vue.extend({
  name: 'MyComponent',
  inject: {
    foo: 'foo',
    bar: 'bar',
    [s]: s
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
  },
  data () {
    return {
      foo: 'foo',
      baz: 'bar'
    }
  },
  provide () {
    return {
      foo: this.foo,
      bar: this.baz
    }
  },
  methods: {
    addToCount(n){
      this.count += n
      this.$emit("add-to-count", n)
    },
    resetCount(){
      this.count = 0
      this.$emit("reset")
    },
    onChildChanged(val, oldVal) { },
    onPersonChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    },
    'person': {
      handler: 'onPersonChanged',
      immediate: true,
      deep: true
    }
  }
})

Можно обнаружить, что после использования синтаксиса TypeScript код значительно упрощается.

поддержка PWA

Когда мы решим включить функцию PWA, файлы, связанные с service-worker.js и manifest.json, будут созданы по умолчанию при упаковке сгенерированного кода. Учащиеся, знакомые с PWA, знают, что service-worker.js и manifest.json являются важными файлами конфигурации для PWA. Если читатель еще не знаком с PWA, нажмитеОфициальная документация PWAПроверить.

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

module.exports = {
  // ...其它 vue-cli 插件选项...
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc 中 InjectManifest 模式下是必填的。
      swSrc: 'dev/sw.js',
      // ...其它 Workbox 选项...
    },
  },
};

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

Ссылаться на:woohoo.php.talent/just-tutorial… GitHub.com/v UE JS/v UE — от… GitHub.com/v UE JS/v UE — от…