Разработка на основе Vue3.0

Интерфейс проекта

Простой небольшой проект, основанный наVue3.0 + axios + swiperвыполнить. Пусть у всех будет новое понимание Vue3.0 API.

предисловие

Я лично считаю, что Vue3.0 легко освоить.Как насчет уровня Vue2.0, Vue3.0 примерно одинаков, поэтому студенты, которые не очень хорошо разбираются в Vue2.0, должны вернуться и наверстать упущенное. стадии, они хотят изучить Vue 3.0, легко вызвать путаницу в знаниях. Многие методы написания аналогичны Vue2.0, и стоимость обучения невелика, но многие базовые вещи переработаны, поэтому в настоящее время не рекомендуется использовать его непосредственно в проектах компании.

личное предложение

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

"vue-router": "^4.0.0-alpha.6"Все еще в разработке. Этот этап еще не завершен, и ошибка, решенная сегодня, может стать еще одной ошибкой завтра.
Сторонняя библиотека еще не совместима с неожиданной совместимостью Vue3.0.
Некоторые функции Vue3.0 API еще не совершенны, реализованы Vue2.0 и Vue3.0.
Если вы столкнулись с техническими трудностями, вам нужно потратить много времени на размышления об этом. Некоторые проблемы связаны с элементарными вещами, и если фундамент не прочный, обнаружить проблему может быть сложно.

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

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

Боевой проект

Vue 3.0 вносит улучшения на основе совместимости с 2.x. И может использовать новые функции Vue 3.0.

Инициализировать проект

1. Установите vue-cli3

npm install -g @vue/cli

2. Создайте проект

vue create zhihu

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

babel：javascript转译器，将最新版的js语法（es6、es7）转换为现阶段浏览器可以兼容的js代码
typescript：使用 TypeScript 书写源码
PWA：渐进式WEB应用
Router：使用vue-router
Vuex：使用vuex
CSS Pre-processors：css预处理器
Linter / Formatter：代码规范标准
Unit Testing：单元测试
E2E Testing：e2e测试

? 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

3. Обновление версии Vue

vue add vue-next
// 将Vue 2.6.x版本升级到

Посмотреть проектpackage.json

  "dependencies": {
     "vue": "^3.0.0-beta.1",
     "vue-router": "^4.0.0-alpha.6"
    },
    "devDependencies": {
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-eslint": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "prettier": "^1.19.1",
    "vue-cli-plugin-vue-next": "~0.1.3"
  },

vue-routerеще в разработке,vue-cli-plugin-vue-nextИспользуется для работы с синтаксисом, связанным с компиляцией Vue3.0.

Статические страницы

макет проекта, статическая страница, пропуск

Структура проекта

.
├── src
│   ├── api
│   ├── assets
│   ├── components
│   ├── router
│   ├── utils
│   ├── views
│   ├── App.vue
│   └── main.js
├── public
├── vue.config.js
└── package.json

src/api: Используется для хранения интерфейсов и управления.
src/assets: Каталог статических ресурсов.
src/components: Используется для хранения глобальных компонентов.
src/router: Используется для хранения файлов, связанных с маршрутизацией.
src/utils: используется для хранения файлов, связанных с инструментами
src/views: Используется для хранения компонентов, связанных с представлением.

Очки знаний API проекта Vue3.0

setup

setupФункции — это новая опция компонента. В качестве точки входа для использования Composition API внутри компонента.

Жизненный цикл

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

Меры предосторожности:

thisНе может быть использован, студенты, которые знают Vue2.0, должны знать, между этим жизненным циклом.data()Данные еще не сгенерированы, поэтомуthis.xxнельзя назвать.

отзывчивые данные

Vue2.0 хранится вdata() {return {} }Его можно вызвать напрямую, тогда как Vue3.0 нужно передатьrefилиreactiveобъявить реактивные данные.

ref

Принимает значение параметра и возвращает реактивный и изменяемый объект ссылки. Объект ref имеет единственное свойство .value, которое указывает на внутреннее значение.

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

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

reactive

Принимает простой объект и возвращает реактивный прокси для этого простого объекта.

const obj = reactive({ count: 0 })

вычисляемое свойство`computed`

computedПередайте функцию получения, которая возвращает объект ref, который по умолчанию нельзя изменить вручную.

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

watch

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

const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

Все вышеперечисленные уроки взяты изAPI композиции Vue

реальный бой

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

обработка времени

src/utils/index.js

function formatTime(time) {
  let arr = [];
  time = time.toLocaleDateString();
  time.replace(/\d+/g, (val) => {
    val = val < 2 ? `0${val}` : val;
    arr.push(val);
  });
  return arr;
}
function convertTime(time) {
  time = time.replace(/^(\d{4})(\d{2})(\d{2})$/g,(_,g1,g2,g3)=>{
    return `${g1}/${g2}/${g3}`
  })
  return new Date(time);
}

export default {
  formatTime,
  convertTime,
};

formatTime()параметры вtimeдляnew Date()стандартный формат даты, затем передатьtoLocaleDateString()Превратиться в2020/7/21, которые последовательно добавляются в массив.

在不同环境下，输出不同结果。`toLocaleDateString`
 // 浏览器
["2020", "7", "21"]

// [Running] node
[ '7', '21', '2020']

convertTimeМетод: поставить формат20200721Превратиться в2020/07/21регулярное выражение.

заявление

import utils from "../utils";

const state = reactive({
  date: new Date(),
  bannerData: [],
  newsData: []
});

let day = computed(() => utils.formatTime(state.date)[2]);
let month = computed(() => utils.formatTime(state.date)[1]);
    
return {
 day,
 month
};

Рассчитайте месяц и день, вычислив свойство. Написание не похоже на Vue2.0, непосредственно обернутое вcomputedв.

интерфейс запроса

src/api/в каталогеaxios.jsправильноaxiosдля вторичной упаковки,zhihu.jsСвязанный интерфейс Zhihu Daily.index.jsИнтегрируйте несколько интерфейсов.

// zhihu.js
import axios from './axios'

function API_LATEST(){
  return axios.get('/news/latest')
}
function API_DETAIL(id){
  return axios.get(`/news/${id}`)
}

export default {
  API_LATEST,
  API_DETAIL
}

// index.js
import zhihu from './zhihu'
export default { zhihu }

заявление

import API from "../api";

export default {
  setup() {
    const state = reactive({
      bannerData: [],
      newsData: []
    });
     // 在渲染组件前，异步加载数据
    onBeforeMount(async () => {
      const { date, stories, top_stories } = await API.zhihu.API_LATEST();
      state.date = utils.convertTime(date);
      state.newsData.push({
        date: state.date,
        stories
      });
      state.bannerData = top_stories;
    });
    return {
      ...toRefs(state)
    };
  }

Инициализировать карусель

import { watch } from "vue";
function initSwiper() {
  new Swiper(".swiper-container", {
    loop: true,
    pagination: {
      el: ".swiper-pagination"
    }
  });
}
setup(props) {
 watch(
   () => props.bannerData,
   () => initSwiper()
 );
}

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

Решение:

Vue2.0Вызывает API Vue.nextTick (выполняет отложенный обратный вызов после завершения следующего цикла обновления DOM) для выполнения инициализации.
Vue3.0пройти черезwatchЧтобы прослушать изменения данных, выполните инициализацию.

Особенности страницы сведений

Когда вы нажимаете на страницу сведений о списке, вам нужно указать идентификатор статьи и перейти к интерфейсу сведений о запросе, чтобы получить больше контента. Если бы я сказал вышеsetup()Если у вас есть впечатление о методе, вsetup()нельзя вызватьthis. привыкли кVue2.0Метод прыжкаthis.$router.push({name: 'detail',params:{id: xx}})Vue3.0 Внезапно я не знаю, как начать, я также предоставляю компонентный переход в Vue2.0.

<router-link :to="{path:`/detail/${item.id}`}" </router-link>

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

Маршрутизация Vue3.0 все еще находится в стадии разработки, и API параметров маршрутизации еще не получен, поэтому его можно заменить только методом записи Vue2.0.

Сложность: как изменить значение Vue3.0 в Vue2.0 и при этом оставатьсяwatchконтролируется.

Решение:

Реализуйте функции непосредственно в Vue2.0. (Ну, это учебник Vue3.0, конечно, я должен использовать Vue3.0 для его реализации)

Я нахожусь в Vue3.0, я сначала объявляю ответные данные, после получения параметров маршрутизации через Vue2.0 попробуйтеthis.id = xxраспечататьlog, вывод этого объекта выглядит следующим образом, и функция реализована.

Однакоreactiveспособ объявить отзывчивые данные, остальное остается без изменений, найдено и может быть найденоid. После глубокого пониманияrefи Vue2.0data( return {} )Основополагающие принципы основаны наObject.definedpropertyРеализовано, поэтому его можно изменить через this.reactiveформулаPrxoyосуществленный. И если пакет в ref является объектом, он также пройдетPrxoyвыполнить.

import { watch, toRefs,ref,reactive } from "vue";
import API from "../api";
export default {
  setup() {
    let id = ref(0);
    let state = reactive({
      image: '',
      body: '',
      title: '',
      section: ''
    });
    watch(id, async () => {
      let { image, body, title,section } = await API.zhihu.API_DETAIL(id.value)
      state.image = image
      state.body = body
      state.title = title,
      state.section = section? section.name : '佚名'
    });
    return {
      id,
      ...toRefs(state)
    }
  },
  beforeMount(){
    let { id } = this.$route.params
    this.id = id
  }
};

завершить проект

Чжиху Ежедневно

Суммировать

Vue3.0 реализует Zhihu Daily.Лично я чувствую себя хорошо.Новый метод письма более-менее непривычен.Например,естьtoRefПисать меньше ов, отлаживать долго не сообщая об ошибке, но к счастью заметил позже. Написав его несколько раз, вы привыкнете.По сравнению с улучшением всех аспектов Vue3.0, некоторые изменения в написании понятны. Так что лучше как можно скорее ознакомиться со знаниями Vue3.0 и дождаться официального использования UI-библиотеки и других совместимых версий Vue3.0. Я верю, что этот день скоро наступит.

Интерфейс проекта

предисловие

личное предложение

Боевой проект

Инициализировать проект

Статические страницы

Структура проекта

Очки знаний API проекта Vue3.0

setup

отзывчивые данные

вычисляемое свойствоcomputed

watch

реальный бой

обработка времени

интерфейс запроса

Инициализировать карусель

Особенности страницы сведений

завершить проект

Суммировать

подписка

вычисляемое свойство`computed`