Author: mapbar_front Link: https://juejin.cn/post/7008063765585330207
summary
Vue3 has been out for some time. In the team, it has also carried out a lot of business practice and some of its own thinking.
In general, Vue3 has made great progress both in the underlying principle and in the actual development of business.
proxy is used to replace the previous API of Object.defineProperty, which has better performance and solves the defects of Vue in dealing with objects and arrays; In the diff algorithm, the static marking method is used, which greatly improves the execution efficiency of Vue.
In terms of use, we changed from options Api to composition Api. Slowly, in the actual business, we abandoned the original isolated writing methods of data, methods and calculated. composition Api, which is more focused, pays attention to the aggregation of related businesses. At the same time, in the composition Api, in order to prevent too heavy business logic, it provides a way to separate concerns, which greatly improves the readability of our code.
TypeScript is fully supported, and type verification has become the quality guarantee for Vue3's large-scale project development in the future. At the same time, it is also facing the trend - the future of the front end is TypeScript!
1,compositon Api
The essence of composition API is embodied in the code, that is, a setup function. In this setup function, the returned data will be used in the template of the component. The object of return, to some extent, represents the data attribute in the previous vue2.
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
return {
counter
}
}
})
At this time, for most beginners, the question may be whether I can define the writing method of options Api, such as data, computed, watch, methods, etc.
Here, I need to make it clear that Vue3 is fully compatible with the options Api of Vue2, but conceptually, it is more recommended to write our components in the way of setup. The reasons are as follows: the existence of Vue3 itself is to solve the problem of Vue2. The problem of Vue2 is that the lack of aggregation will lead to more and more bloated code! The setup method allows data, method logic, dependencies, etc. to be aggregated together, which is more convenient for maintenance.
In other words, in the future, we should try not to write separate data, computed, watch, methods, etc. it is not that Vue3 does not support, but contrary to Vue3's concept.
The components attribute, that is, the subcomponent of a component. This configuration is not different between Vue2 and Vue3. How to use Vue2 is still used by Vue3.
1. What is the difference between ref and reactive?
In terms of function, both ref and reactive can realize responsive data!
At the grammatical level, there are differences between the two. The responsive data defined by ref needs to be changed in the form of [data].value; The data defined by reactive needs to be changed in the way of [data].[prpoerty].
const actTitle: Ref<string> = ref('Activity name');
const actData = reactive({
list: [],
total: 0,
curentPage: 1,
pageSize: 10
});
actTitle.value = 'Activity name 2';
actData.total = 100;
However, at the application level, there are still differences. Generally speaking, for a single common type of data, we use ref to define the response. In the form scenario, the scenario of describing the key:value object of a form, using reactive; In some scenarios, a set of data of a module is usually defined in a reactive way.
So, do you have to use reactive to define objects? In fact, it's not. You can analyze specific problems according to your own business scenarios! ref he emphasizes the change of the value of a data, while reactive emphasizes the change of a certain attribute of the defined object.
2. Periodic function
The periodic function, in Vue3, is used separately as follows:
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
onMounted(() => {
// Processing services, generally data requests
})
return {
counter
}
}
})
3. store usage
In Vue2, you can get it directly through this.$store, but in Vue3, there is no concept of this. The usage is as follows:
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); // With computed, get the value of store.
return {
counter,
storeData
}
}
})
4. Use of router
In Vue2, the routing function is programmed through this.$router, but in Vue3, it is used as follows:
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. Separation of concerns
Separation of concerns should be divided into two layers: the first layer means that Vue3's setup itself puts relevant data and processing logic together, which is an aggregation of concerns, which is more convenient for us to see business code.
The second layer means that when the setup becomes larger, we can extract a related business inside the setup to separate the concerns of the second layer.
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" });
}
// In this example, we separate the related businesses that obtain the merchant list. That is, the following 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 support
Accurately speaking, this part is the content of TS, but it is closely related to the development of Vue3 project. Therefore, if we really want to use Vue3, we still have to understand the use of TS.
However, in this part, I will not introduce the basic syntax of TS, mainly how to organize ts in business scenarios.
A core idea of using TS for business development is to focus on the data structure first, and then develop pages according to the data structure. The previous front-end development mode was to write pages first and then focus on data.
For example, to write a gift list page, we may need to define such interfaces. In a word, we need to pay attention to the interface of page data, the data type returned by the interface, the input parameter type of the interface, and so on.
// Each item in the gift creation, editing and list will be of this data type.
interface IGiftItem {
id: string | number;
name: string;
desc: string;
[key: string]: any;
}
// Global corresponding type definition
// Moreover, generally speaking, we do not confirm what the type returned by the interface is (it may be null, object or array), so we use the paradigm to define the interface
interface IRes<T> {
code: number;
msg: string;
data: T
}
// Interface return data type definition
interface IGiftInfo {
list: Array<IGiftItem>;
pageNum: number;
pageSize: number;
total: number;
}
In a common interface request, we generally use TS to define a data request, req type of data request and res type of data request.
export const getGiftlist = (
params: Record<string, any>
): Promise<IRes<IGiftInfo>> => {
return Http.get("/apis/gift/list", params);
};