Vue3 is a popular JavaScript front-end framework.
Local access is: localhost: plus your port number
This is a deployed vue3+typescript project, browser access:
https://shdily.com
The following introduces the syntactic sugar of vue3
1、Template Refs
<template>
<div>
<input type="text" ref="myInput">
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
setup() {
const myInput = ref(null);
function focusInput() {
myInput.value.focus();
}
return {
myInput,
focusInput
}
}
}
</script>
It is the latest version of Vue.js. Compared with Vue2, Vue3 has many improvements and updates, including faster rendering speed, smaller package size, better TypeScript support, better responsive system and more flexible component API, etc.
2、Reactive Properties
<template>
<div>
<p>{
{ message }}</p>
<button @click="updateMessage">Update Message</button>
</div>
</template>
<script>
import {
reactive } from 'vue';
export default {
setup() {
const data = reactive({
message: 'Hello World!'
});
function updateMessage() {
data.message = 'New Message';
}
return {
...data,
updateMessage
}
}
}
</script>
One of the most notable improvements is the use of the new virtual DOM engine, which gives Vue3 a big performance boost over Vue2. At the same time, Vue3 also added many new features, such as Composition API, which can better organize and reuse code.
3、Computed Properties
<template>
<div>
<p>{
{ fullName }}</p>
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
</div>
</template>
<script>
import {
computed, reactive } from 'vue';
export default {
setup() {
const data = reactive({
firstName: '',
lastName: ''
});
const fullName = computed(() => {
return `${
data.firstName} ${
data.lastName}`;
});
return {
...data,
fullName
}
}
}
</script>
And simplify the development process of complex components. In summary, Vue3 provides powerful and flexible tools for modern web development that can help developers build maintainable and scalable applications more efficiently.
4、Lifecycle Hooks
<template>
<div>
<p>{
{ message }}</p>
</div>
</template>
<script>
import {
reactive, onMounted } from 'vue';
export default {
setup() {
const data = reactive({
message: ''
});
onMounted(() => {
data.message = 'Component Mounted';
});
return {
...data
}
}
}
</script>