Vue3 has become stable now, many code libraries have begun to use it, and many projects will inevitably migrate to Vue3 in the future. This article records some of the problems I encountered when using Vue3, hoping to help other developers.
1. Use reactive to encapsulate basic data types
In the traditional development model, data declaration is very simple. However, there are multiple responsive variable declaration methods in Vue. The overall usage rules are as follows:
Use reactive to encapsulate Object, Array, Map, and Set data types;
Use ref to encapsulate String, Number, and Boolean types.
If you use reactive to encapsulate basic data types, a warning will be generated, and the encapsulated value will not become a reactive object.
<script setup>
import {
reactive } from "vue";
const count = reactive(0);
</script>
However, you can use ref to encapsulate data types such as Object and Array, and reactive will be called internally.
2. Deconstruct reactive objects
In the code below, the count is encapsulated into a reactive object. When the button is clicked, the count will increase automatically.
<template>
Counter: {
{
state.count }}
<button @click="add">Increase</button>
</template>
<script>
import {
reactive } from "vue";
export default {
setup() {
const state = reactive({
count: 0 });
function add() {
state.count++;
}
return {
state,
add,
};
},
};
</script>
If you need to use ES6 structure assignment to structure the state, you need to use the following code:
<template>
<div>Counter: {
{
count }}</div>
<button @click="add">Increase</button>
</template>
<script>
import {
reactive } from "vue";
export default {
setup() {
const state = reactive({
count: 0 });
function add() {
state.count++;
}
return {
...state,
add,
};
},
};
</script>
After the structure copy is completed, click the button, the effect is as follows:
The code looks relatively similar, and based on previous performance, the logic can be executed normally. But in fact, Vue's reactive tracking is obtained through properties, which means that we cannot deconstruct the reactive object, which will cause the reference connection to be lost. This is one of the limitations of reactive proxies.
3. Confusion caused by using .value
Ref accepts a value and returns a reactive object, which is only available under the internal object .value property.
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
But if ref is applied in a template, there is no need to unpack the ref, that is, there is no need to use .vue.
<script setup>
import {
ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
{
{
count }} // 不需要调用.value
</button>
</template>
It should be noted that unpacking only works on first-level attributes, and the following code will return [object Object]
<script setup>
import {
ref } from 'vue'
const object = {
foo: ref(1) }
</script>
<template>
{
{
object.foo + 1 }} // [object Object]
</template>
Using .value correctly takes time, and beginners occasionally forget it. When using it, be careful to only use it in appropriate scenarios.
4. Emitted event
Since the release of Vue, child components can communicate with parent components through ems. You only need to add a custom listener to listen for events.
this.$emit('my-event')
<my-component @my-event="doSomething" />
In Vue3, you need to use the compiler macro defineEmits to declare emits.
const emit = defineEmits(['my-event'])
emit('my-event')
</script>
Under setup syntactic sugar, defineEmits and defineProps will be automatically introduced. In other cases, proactive introduction is required.
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup code
</script>
Finally, since in Vue3, events must be declared, so the .native modifier is no longer needed, and this modifier has been removed.
5. Declare component options
setup does not support the following component option declarations:
- name
- inheritAttrs
- customOptions
If you need to continue using these attributes, you can declare multiple scripts as follows:
<script>
export default {
name: 'CustomName',
inheritAttrs: false,
customOptions: {
}
}
</script>
<script setup>
// script setup logic
</script>
6. Use Reactivity Transform
Reactivity Transform is a preview attribute in Vue3. It is somewhat controversial and is disabled by default. It is mainly used to simplify the way components are declared. The idea is to utilize a compile-time conversion to automatically unpack the ref, thus avoiding the use of .value. This feature has been removed from Vue3.3 and is provided as an extension package. Since it is not a core part of Vue, and there are still many risks at present, it is recommended not to invest too much in this aspect. If you are interested, you can refer to the article: Reactivity Transform
7. Define asynchronous components
Asynchronous components were previously declared by enclosing them in methods.
const asyncModal = () => import('./Modal.vue')
In Vue3, you need to use defineAsyncComponent to declare asynchronous components.
import {
defineAsyncComponent } from 'vue'
const asyncModal = defineAsyncComponent(()
=> import('./Modal.vue'))
8. Use unnecessary wrapping elements in templates
<!-- Layout.vue -->
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
Vue3 supports multiple root elements and no longer needs to be wrapped with outer div elements.
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
9. Life cycle function
All component lifecycle functions are implemented by adding the on prefix or completely renaming them. The following figure details the specific changes:
10. Product documentation
The official documentation has been updated, the API has been supplemented and updated, and contains many valuable comments, guides and best practices. Even if you are currently using Vue2, you will learn something new by reading the new documentation.
Summarize
Each framework has a learning curve. Vue3 is steeper than Vue2, and there will be a certain learning cost between framework switches. However, the Vue3 combined API is indeed simpler and easier to use than the Vue2 optional API. If you have any questions during use, you are welcome to leave a message for communication.
This article is translated from the article:
https://fadamakis.com/10-mistakes-to-avoid-when-starting-with-vue-3-1d1ced8552ae
Extension link:
Implementing Excel server import and export under the Spring Boot framework
Project practice: online quotation procurement system (React + SpreadJS + Echarts)
React + Springboot + Quartz, realize Excel report automation from 0