In diesem Artikel erfahren Sie mehr über die Grundkonzepte der kombinierten API, das Konzept der Eingabefunktion setup() und die Verwendung von reactive() im vue3-Projekt. Ich hoffe, dass er für alle hilfreich ist! 1. Kombinierter API-Vergleich der Vue2-Projektstruktur stimmte zu.
2. Nachteile: Bei großen Projekten ist die Wiederverwendung, Verwaltung und Wartung von Code nicht förderlich.
3. Die Daten und die Geschäftslogik derselben Funktion sind an N Stellen in derselben Datei verstreut. Da die Geschäftskomplexität zunimmt, müssen wir häufig Daten () und Methoden verarbeiten
In vue3
1 Vorteile: Daten und Geschäftslogik derselben Funktion können zur einfachen Wiederverwendung und Wartung gemeinsam organisiert werden.
2. Ausführungszeitpunkt: Wird vor der Instanzerstellung aufgerufen, sogar früher als beforeCreate in Vue2. 3. Hinweis: Da die Instanz beim Ausführen des Setups nicht erstellt wurde, können die Daten in Daten und Methoden nicht direkt im Setup verwendet werden, sodass dies im Vue3-Setup ebenfalls an undefiniert gebunden ist.
<template>
<h1 @click="say()">{{ msg }}</h1>
</template>
<script>
export default {
setup() {
const msg = 'Hello Vue3'
const say = () => {
console.log(msg)
}
return { msg, say }
},
}
</script>Nach dem Login kopieren
Effektansicht: 
Hinweis: Data() und Methoden ähnlich wie vue2 müssen im Gegenzug geschrieben werden, bevor sie verwendet werden können Das Ergebnis heißt. 【Ergänzende kleine Interviewfragen】Muss die Rückgabe im Setup nur ein Objekt sein? (Setup kann auch eine Rendering-Funktion zurückgeben)
2.3.reactive()-Funktion
Verwenden Sie die reaktive Funktion, um das Array in reaktionsfähige Daten zu verpacken. reaktiv ist eine Funktion, die verwendet wird, um gewöhnliche Objekte/Arrays zur Verwendung in reaktive Daten zu verpacken. Sie kann grundlegende Datentypen nicht direkt verarbeiten (da sie auf Proxy basiert und Proxy nur Objekte vertreten kann).
- Zum Beispiel, wenn ich ein Bedürfnis habe: Klicken Sie, um die aktuellen Zeileninformationen zu löschen.
App.vue
- In diesem Fall verwenden Sie reactive(), um das Array zu umschließen, um es zu responsiven Daten zu machen. Vergessen Sie nicht,
<template>
<ul>
<li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
</ul>
</template>
<script>
export default {
name: 'App',
setup() {
const arr = ['a', 'b', 'c']
const removeItem = (index) => {
arr.splice(index, 1)
}
return {
arr,
removeItem,
}
},
}
</script>Nach dem Login kopieren
zu importieren. Jetzt ist die Seite responsiv, löschen Sie, wenn Sie darauf klicken, die Seite reagiert
Ähnlich: wir Verwenden Sie reactive(), um unsere Objekte zu umschließen, und verwenden Sie
<template>
<ul>
<li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const arr = reactive(['a', 'b', 'c'])
const removeItem = (index) => {
arr.splice(index, 1)
}
return {
arr,
removeItem,
}
},
}
</script>Nach dem Login kopieren
Interpretation des obigen Codes:
Ich habe das Eingabefeld definiert, die Vorgänge zum Löschen und Hinzufügen von Ereignissen definiert und die bidirektionale Bindung durchgeführt v-Modell Passen Sie die Daten an, um das Hinzufügen und Löschen meiner Daten abzuschließen.
Haben Sie inzwischen ein klareres Verständnis für die Verwendung von setup()? Vereinfachen wir unten unsere Schreibmethode.
2.3.1 Weitere Extraktion von reactive()
Optimierung: Extrahieren Sie die Daten und Geschäftslogik derselben Funktion in eine Funktion, wodurch der Code besser lesbar und einfacher wiederverwendbar ist.
<template>
<form @submit.prevent="handleSubmit">
<input type="text" v-model="user.id" />
<input type="text" v-model="user.name" />
<input type="submit" />
</form>
<ul>
<li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
function useRemoveItem() {
const state = reactive({
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
],
})
const removeItem = (index) => {
state.arr.splice(index, 1)
}
return { state, removeItem }
}
function useAddItem(state) {
const user = reactive({
id: '',
name: '',
})
const handleSubmit = () => {
state.arr.push({
id: user.id,
name: user.name,
})
user.id = ''
user.name = ''
}
return {
user,
handleSubmit,
}
}
export default {
name: 'App',
setup() {
const { state, removeItem } = useRemoveItem()
const { user, handleSubmit } = useAddItem(state)
return {
state,
removeItem,
user,
handleSubmit,
}
},
}
</script>Nach dem Login kopieren
将方法抽离出来，用类似于导入的方式进行一个抽离，将数据与方法放在一起，便于我们的统一管理。
2.3.2reactive()再进行进一步文件拆分并且引入
App.vue
<template>
<form >
<input type="text" v-model="user.id" />
<input type="text" v-model="user.name" />
<button type="submit" @click.prevent="submit">提交</button>
</form>
<ul>
<li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
</ul>
</template>
<script>
import {useRemoveItem,handleSubmit} from './hooks'
export default {
name: 'App',
setup() {
const { state, removeItem } = useRemoveItem()
const { user, submit } = handleSubmit(state)
return {
state,removeItem,user,submit
}
},
}
</script>Nach dem Login kopieren
hooks/index.js
import { reactive } from 'vue'
export const useRemoveItem=()=> {
const state= reactive( {
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
]
})
const removeItem=(index)=>{
state.arr.splice(index,1)
console.log(state.arr);
}
return { state, removeItem }
}
export const handleSubmit=(state)=>{
const user = reactive({
id: '',
name: '',
})
console.log(1);
const submit = () => {
state.arr.push({
...user
})
user.id = ''
user.name = ''
}
return { user, submit }
}Nach dem Login kopieren
（学习视频分享：vuejs入门教程、编程基础视频）
Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung der Funktionen setup() und reactive() in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
