Vue3 в сочетании с резюме практики разработки проекта TS
Обзор
Прошло много времени с выхода Vue 3. В команде также проведено много бизнес-практик, а также получены некоторые собственные мысли.
В целом, Vue3 добился больших успехов как в основном принципе, так и в фактическом развитии бизнеса.
Использование прокси для замены предыдущего API Object.defineProperty имеет лучшую производительность, а также решает прежние недостатки Vue в обработке объектов и массивов, в алгоритме diff используется метод статического тегирования, что значительно повышает эффективность выполнения Vue.
На уровне использования мы перешли от вариантов Api к составу Api, и постепенно в реальном бизнесе мы отказались от исходного изолированного написания данных, методов и вычислений. compositon Api, он более сфокусирован, он уделяет внимание агрегации связанных бизнесов. В то же время в составе API, чтобы не допустить слишком тяжелой бизнес-логики, предусмотрен способ разделения ответственности, что значительно улучшает читабельность нашего кода.
Он полностью поддерживает TypeScript, а проверка типов стала гарантией качества Vue3 для разработки крупномасштабных проектов в будущем.В то же время это также ориентировано на тренды — будущее внешнего интерфейса — это TypeScript!
1. API композиции
Суть compositon Api отражена в коде, то есть функции настройки, в этой функции настройки возвращаемые данные будут использоваться в шаблоне компонента. Возвращаемый объект в определенной степени представляет атрибут данных в предыдущем файле vue2.
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
return {
counter
}
}
})
В это время у большинства новичков могут возникнуть сомнения в том, смогу ли я определить способ написания опций Api, таких как данные, вычисляемые, часы, методы и т. д.
Здесь мне нужно прояснить, что Vue3 полностью совместим с API опций Vue2, но концептуально метод установки больше рекомендуется для написания наших компонентов. Причины таковы: само существование Vue3 должно решить проблему Vue2, а проблема Vue2 в том, что отсутствие агрегации приведет к тому, что код будет становиться все более и более раздутым! Метод установки может объединять данные, логику метода, зависимости и т. д. вместе, что упрощает его обслуживание.
То есть в будущем мы постараемся не писать отдельные данные, вычисления, часы, методы и т. д. Не то чтобы Vue3 не поддерживает это, но это противоречит концепции Vue3.
Свойство компонентов, которое является подкомпонентом компонента, не сильно отличается между Vue2 и 3. Как использовать Vue2, Vue3 по-прежнему используется.
1. В чем разница между ref и reactive?
С точки зрения функциональности и ref, и reactive могут реализовывать адаптивные данные!
На грамматическом уровне они разные. Реагирующие данные, определенные с помощью ref, должны быть изменены в соответствии с [data].value, а данные, определенные с помощью reactive, должны быть изменены в соответствии с [data].[prpoerty].
const actTitle: Ref<string> = ref('活动名称');
const actData = reactive({
list: [],
total: 0,
curentPage: 1,
pageSize: 10
});
actTitle.value = '活动名称2';
actData.total = 100;
Но на уровне приложения все же есть различия, вообще говоря: для одного общего типа данных мы используем ref для определения отзывчивости. В сценарии формы ключ: значение объекта формы описывается с помощью реактивного, в некоторых сценариях набор данных определенного модуля обычно определяется реактивным способом.
Итак, должен ли объект быть определен с помощью реактивного? На самом деле это не так, можно по собственному бизнес-сценарию конкретный анализ конкретных проблем! ref подчеркивает изменение значения данных, а reactive подчеркивает изменение свойства определенного объекта.
2. Периодическая функция
Периодические функции в Vue3 используются отдельно следующими способами:
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
onMounted(() => {
// 处理业务，一般进行数据请求
})
return {
counter
}
}
})
3. Использование магазина
В Vue2 вы можете получить его напрямую через this.$store, но в Vue3 такого понятия нет.
import { useStore } from "vuex";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const store = useStore();
const storeData = computed(() => store); // 配合computed，获取store的值。
return {
counter,
storeData
}
}
})
4. Использование роутера
В Vue2 функциональное программирование маршрутизации выполняется через this.$router, а в Vue3 используется так:
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
return {
counter,
onClick
}
}
})
2. Разделение ответственности
Разделение проблем следует разделить на два смысла: первый смысл в том, что настройка самого Vue3 объединяет связанные данные и логику обработки, это агрегация проблем, которую нам удобнее видеть в бизнес-коде.
Второй уровень означает, что, когда установка становится больше, мы можем выделить связанную часть бизнеса внутри установки, чтобы отделить проблемы второго уровня.
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
import useMerchantList from './merchant.js';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
// 在该示例中，我们把获取商家列表的相关业务分离出去。也就是下面的merchant.ts
const {merchantList} = useMerchantList();
return {
counter,
onClick,
merchantList
}
}
})
merchant.ts
import { getMerchantlist } from "@/api/rights/gift";
import { ref, onMounted } from "vue";
export default function useMerchantList(): Record<string, any> {
const merchantList = ref([]);
const fetchMerchantList = async () => {
let res = await getMerchantlist({});
merchantList.value = res?.data?.child;
};
onMounted(fetchMerchantList);
return {
merchantList
};
}
3. Поддержка TypeScript
Эта часть контента, если быть точным, является контентом TS, но она тесно связана с разработкой проекта Vue3, поэтому, если мы действительно хотим использовать Vue3, нам все равно придется разбираться в использовании TS.
Однако в этой части я не буду вводить базовый синтаксис TS, в основном в бизнес-сценариях, как организовать TS.
Основная идея использования TS для развития бизнеса заключается в том, чтобы сначала сосредоточиться на структуре данных, а затем разрабатывать страницы в соответствии со структурой данных. Предыдущая модель разработки внешнего интерфейса заключалась в том, чтобы сначала написать страницу, а затем сосредоточиться на данных.
Например, чтобы написать страницу со списком подарков, мы можем определить такие интерфейсы. В целом, нам нужно обратить внимание на: интерфейс данных страницы, тип данных, возвращаемых интерфейсом, тип входного параметра интерфейса и так далее.
// 礼品创建、编辑、列表中的每一项，都会是这个数据类型。
interface IGiftItem {
id: string | number;
name: string;
desc: string;
[key: string]: any;
}
// 全局相应的类型定义
// 而且一般来说，我们不确认，接口返回的类型到底是什么（可能是null、可能是对象、也可能是数组），所以使用范型来定义interface
interface IRes<T> {
code: number;
msg: string;
data: T
}
// 接口返回数据类型定义
interface IGiftInfo {
list: Array<IGiftItem>;
pageNum: number;
pageSize: number;
total: number;
}
В общем запросе интерфейса мы обычно используем TS для определения запроса данных, типа req запроса данных и типа res запроса данных.
export const getGiftlist = (
params: Record<string, any>
): Promise<IRes<IGiftInfo>> => {
return Http.get("/apis/gift/list", params);
};