Artikelverzeichnis
Inhaltsverzeichnis
1. Was ist die Setup-Funktion?
3. Vue3 Chinesische Dokumentation und Komponentenbibliothek für vue3
Vorwort
Vue3 ist ein datengesteuertes progressives JavaScript-Framework, dessen Designphilosophie Einfachheit, Flexibilität und Effizienz umfasst. Im Vergleich zu Vue2 unterscheidet sich das architektonische Design von Vue3 stark, einschließlich der Umschreibung des responsiven Systems, der Verbesserung des virtuellen DOM, der Einführung der Composition API und so weiter. Die Leistung von Vue3 wurde erheblich verbessert und bietet auch mehr Optimierungsmöglichkeiten, wie z. B. Tree-Shaking- und Teleport-Komponenten.
Gleichzeitig unterstützt Vue3 auch TypeScript besser und führte einige neue APIs und globale Anweisungen ein, wodurch die Entwicklung bequemer und flexibler wird. Das Aufkommen von Vue3 hat sowohl für die Entwicklung auf Unternehmensebene als auch für Front-End-Entwickler eine gewisse Bedeutung und einen gewissen Wert.
1. Was ist die Setup-Funktion?
In Vue3 ist die Setup-Funktion ein neues Feature zum Schreiben von Komponentenlogik. Es ist Teil der Composition API, um das Problem zu lösen, dass einige komplexe Komponenten in Vue2 schwer zu warten und zu verstehen sind. Durch die Verwendung der Setup-Funktion von Vue3 kann der Code besser organisiert und die Lesbarkeit und Wartbarkeit des Codes verbessert werden.
Die Setup-Funktion wird ausgeführt, wenn die Komponente instanziiert wird, und diese Funktion wird vor der Hook-Funktion beforeCreate ausgeführt. In der Setup-Funktion können wir APIs wie „ref“ und „reactive“ verwenden, um responsive Daten zu deklarieren, und APIs wie „computed“ und „watch“ können verwendet werden, um berechnete Eigenschaften zu definieren und Änderungen in responsiven Daten zu überwachen.
Darüber hinaus können auch Daten oder Methoden, die dem Template ausgesetzt werden müssen, in der Setup-Funktion definiert werden, und diese Daten und Methoden können direkt im Template verwendet werden.
Es ist zu beachten, dass die Setup-Funktion ausgeführt wird, bevor die Komponente instanziiert wird, und alle responsiven Daten erstellt werden, bevor die Komponente erstellt wird, sodass in der Setup-Funktion nicht darauf zugegriffen werden kann. Darüber hinaus handelt es sich bei Requisiten auch um responsive Daten, aber auf Requisiten kann in der Setup-Funktion nicht direkt zugegriffen werden, und sie müssen über Parameter übergeben werden.
2. Verwenden Sie Schritte
<template>
<div>
<p>count: {
{ count }}</p>
<el-button type="danger" @click="increment">危险按钮</el-button>
<el-button type="danger" @click="fetchData">测试axios</el-button>
</div>
</template>
<script>
// 在Vue3中，ref是一个响应式数据类型，用于声明一个普通类型的数据，
// 并且可以在模板中以响应式的方式使用。
// ref将基础类型的数据（如数字、字符串等）
// 转换为一个带有.value属性的响应式对象，在更新数据时需要修改.value属性的值。
import { ref } from 'vue';
// 根据实际路径引入 Axios 实例
import axios from '@/utils/axios';
export default {
name: "TestPage",
/*vue2 使用data+created
* vue3可以 使用setup等价于data+created
* */
setup() {
// 声明响应式数据
const count = ref(0);
// 定义需要暴露给模板的方法
const increment = () => {
count.value++;
};
let fetchData=()=>{
axios.get('/data')
.then(response => {
// 处理响应数据
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
});
};
// 返回一个包含需要暴露给模板的数据或方法的对象
return {
count,
increment,
fetchData,
};
}
}
</script>
<style scoped>
</style>3. Vue3 Chinesische Dokumentation und Komponentenbibliothek für vue3
Einführung in die chinesische Dokumentation | Vue.js
Komponentenbibliothek Materialstilbibliothek für mobile Komponenten für Vue3
Zusammenfassen
Hinzugefügt werden