последовательность

Сегодня около 4 часов утра была выпущена версия vue-next v3.0.0-beta.1, что означает официальный дебют семейства Vue 3.0. Содержание выпуска включает:

• vue: Beta
• vue-router: Alpha
• vuex: Alpha
• vue-class-component: Alpha
• vue-cli: Experimental support via vue-cli-plugin-vue-next
• eslint-plugin-vue: Alpha
• vue-test-utils: Alpha
• vue-devtools: WIP
• jsx: WIP

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

• Быстро создайте проект Vue 3.0 на основе vue-cli
• Основные возможности Vue 3.0
• Интеграция vue-router и vuex 4.0

В качестве отступления: когда я собирал проект Vue 3.0 сегодня в полдень, я обнаружил ошибку на уровне блока в vue-router-next.Когда я хотел оставить отзыв о проблеме проекта vue-router-next, я обнаружил, уже представили подобную проблему, и то ночью. Во время теста была исправлена ​​​​ошибка, которая хвалит оперативность команды Vue.адрес выдачи, поэтому, когда вы обнаружите проблемы в использовании, вы можете вовремя дать отзыв по проблеме проекта.Это надежная команда!

Инициализация проекта Vue 3.0

Процесс инициализации проекта Vue 3.0 аналогичен процессу инициализации Vue 2.0.Конкретные шаги заключаются в следующем:

Инициализация проекта Vue

Первый шаг — установить vue-cli:

npm install -g @vue/cli

Обратите внимание, что следующие команды неверны!

npm install -g vue
npm install -g vue-cli

После успешной установки мы можем использовать команду vue для проверки метода:

$ vue -V
@vue/cli 4.3.1

Второй шаг — инициализировать проект vue:

vue create vue-next-test

После ввода команды появится интерактивное окно командной строки, здесь мы выбираем Manually select features:

Vue CLI v4.3.1
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

Затем мы проверили: Router, Vuex, препроцессоры CSS и Linter/Formatter, которые необходимы для разработки проектов коммерческого уровня:

Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Примечание. В настоящее время проект Vue 3.0 необходимо обновить с проекта Vue 2.0, поэтому для непосредственного обновления до корзины семейства Vue 3.0 нам необходимо проверить Router и Vuex в процессе создания проекта Vue, поэтому избегайте написания кода инициализации вручную.

После нажатия Enter зависимости будут установлены автоматически.Чтобы ускорить установку, мы можем использовать источник Taobao для ускорения скорости инициализации:

vue create -r https://registry.npm.taobao.org vue-next-test

После создания проекта структура каталогов выглядит следующим образом:

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── views
        ├── About.vue
        └── Home.vue

Обновление проекта Vue 3.0

В настоящее время для создания проекта Vue 3.0 необходимо выполнить обновление плагина. vue-cli не поддерживает его напрямую. Мы входим в каталог проекта и вводим следующие инструкции:

cd vue-next-test
vue add vue-next

После выполнения вышеуказанной команды будет автоматически установлен плагин vue-cli-plugin-vue-next (см.код проекта), плагин делает следующее:

• Установите зависимости Vue 3.0
• Обновите конфигурацию загрузчика веб-пакетов Vue 3.0 для поддержки сборок файлов .vue (очень важно)
• Создайте код шаблона для Vue 3.0
• Автоматически обновлять Vue Router и Vuex в вашем коде до версии 4.0, не будет обновляться, если они не установлены.
• Автоматически генерировать код шаблона Vue Router и Vuex

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

Основные возможности Vue 3.0

Давайте постепенно рассмотрим процесс разработки Vue 3.0 с точки зрения разработки проекта.

Создать маршрут

При разработке проекта нам обычно нужно создать новую страницу, а затем добавить конфигурацию маршрутизации.Мы создаем Test.vue в каталоге /src/views:

<template>
  <div class="test">
    <h1>test page</h1>
  </div>
</template>

<script>
 export default {
 }
</script>

<style lang="less" scoped>
.test {
  color: red;
}
</style>

Затем создайте конфигурацию маршрутизации в /src/router/index.js:

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ '../views/Test.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

Процесс инициализации Vue Router не сильно изменился по сравнению с версией 3.0, за исключением того, что раньше использовался конструктор.Здесь createRouter используется для создания экземпляра Vue Router.Метод настройки в основном такой же.После завершения настройки мы также нужно добавить ссылку в App.vue Route на Test.vue:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/test">Test</router-link>
    </div>
    <router-view/>
  </div>
</template>

Стартовый проект:

npm run serve

Посетите адрес проекта в браузере, и вы можете перейти на тестовую страницу в этот момент:

привязка состояний и событий

Метод определения состояния в Vue 3.0 изменен на метод, аналогичный React Hooks.Давайте определим количество состояний в Test.vue:

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
  </div>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      return {
        count
      }
    }
  }
</script>

В Vue 3.0 состояние инициализации определяется методом установки, и для определения состояния необходимо вызвать метод ref. Затем мы определяем событие для обновления состояния счетчика:

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <button @click="add">add</button>
  </div>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      return {
        count,
        add
      }
    }
  }
</script>

Метод добавления здесь больше не нужно определять в методах, но обратите внимание, что count++ нельзя использовать напрямую при обновлении значения count, а следует использовать count.value++ После обновления кода нажмите кнопку, и значение count будет быть обновленным:

Вычисляемые свойства и слушатели

Реализация вычисляемых свойств и слушателей в Vue 3.0 зависит от вычисляемых и наблюдаемых методов:

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <button @click="add">add</button>
  </div>
</template>

<script>
  import { ref, computed, watch } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })
      const doubleCount = computed(() => count.value * 2)
      return {
        count,
        doubleCount,
        add
      }
    }
  }
</script>

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

const doubleCount = computed(() => count.value * 2)

Listener watch также является методом, который содержит 2 параметра, оба из которых являются функциями:

watch(() => count.value, 
  val => {
    console.log(`count is ${val}`)
  })

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

получить маршрут

В Vue 3.0 экземпляр текущего компонента получается с помощью метода getCurrentInstance, а затем текущий контекст получается с помощью свойства ctx.ctx.$router — это экземпляр Vue Router, который содержит currentRoute для получения текущей информации о маршрутизации.

<script>
  import { getCurrentInstance } from 'vue'

  export default {
    setup () {
      const { ctx } = getCurrentInstance()
      console.log(ctx.$router.currentRoute.value)
    }
  }
</script>

Интеграция с Vuex

Метод интеграции Vuex выглядит следующим образом:

Определить состояние Vuex

Первый шаг — изменить файл src/store/index.js:

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    test: {
      a: 1
    }
  },
  mutations: {
    setTestA(state, value) {
      state.test.a = value
    }
  },
  actions: {
  },
  modules: {
  }
})

Синтаксис и API Vuex практически не изменились, мы создали состояние test.a в состоянии и добавили метод для изменения состояния состояния state.test.a в мутациях: setTestA

Эталонное состояние Vuex

Второй шаг, в Test.vue, используйте состояние Vuex через вычисляемые свойства:

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <div>state from vuex {{a}}</div>
    <button @click="add">add</button>
  </div>
</template>

<script>
  import { ref, computed, watch, getCurrentInstance } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })
      const doubleCount = computed(() => count.value * 2)
      const { ctx } = getCurrentInstance()
      console.log(ctx.$router.currentRoute.value)
      const a = computed(() => ctx.$store.state.test.a)
      return {
        count,
        doubleCount,
        add,
        a
      }
    }
  }
</script>

Здесь мы обращаемся к состоянию в Vuex через вычисляемые свойства:

const a = computed(() => ctx.$store.state.test.a)

ctx — это текущий экземпляр компонента, о котором мы упоминали в предыдущем разделе.

Обновить состояние Vuex

При обновлении состояния Vuex по-прежнему используется метод фиксации, соответствующий Vuex 3.0:

<template>
  <div class="test">
    <h1>test count: {{count}}</h1>
    <div>count * 2 = {{doubleCount}}</div>
    <div>state from vuex {{a}}</div>
    <button @click="add">add</button>
    <button @click="update">update a</button>
  </div>
</template>

<script>
  import { ref, computed, watch, getCurrentInstance } from 'vue'

  export default {
    setup () {
      const count = ref(0)
      const add = () => {
        count.value++
      }
      watch(() => count.value, val => {
        console.log(`count is ${val}`)
      })
      const doubleCount = computed(() => count.value * 2)
      const { ctx } = getCurrentInstance()
      console.log(ctx.$router.currentRoute.value)
      const a = computed(() => ctx.$store.state.test.a)
      const update = () => {
        ctx.$store.commit('setTestA', count)
      }
      return {
        count,
        doubleCount,
        add,
        a,
        update
      }
    }
  }
</script>

Здесь после того, как мы нажмем кнопку обновления, будет запущен метод обновления, в это время метод setTestA будет вызываться через ctx.$store.commit, а значение count будет перезаписано значением state.test. .а

Суммировать

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