淺析vue3中setup()和reactive()函數的使用
- 青灯夜游轉載
- 2023-04-17 18:21:292023瀏覽
這篇文章帶大家聊聊vue3專案中組合式API基礎概念、setup()入口函數概念、 reactive()的使用方法，希望對大家有幫助！
一、組合式API對比vue2專案結構
1.優點：易於學習和使用，寫程式碼的位置已經約定好。
2.缺點：對於大型項目，不利於程式碼的重複使用、不利於管理和維護。
3.解釋：同一功能的資料和業務邏輯分散在同一個檔案的N 個地方，隨著業務複雜度的上升，我們需要經常在類似於data()以及methods中進行來回的處理
#1.優點：可以把相同功能的資料和業務邏輯組織在一起，方便多用和維護。
2.缺點：需要有良好的程式碼組織和分割能力，相對沒有 Vue2 容易上手。
3.解釋：注意：為了能讓大家較好的過渡到 Vue3.0 版本，目前也是支援 Vue2.x 選項 API 的寫法。
#2.1setup()函數的基礎概念
Vue3 中的setup() 是Vue3 新增的元件配置項，用於取代Vue2 中的data()、methods( )、computed() 等配置項目。 setup() 提供了更簡潔的編寫方式，並且能夠更好地利用 Vue3 提供的 Composition API。 setup() 函數接受兩個參數，分別是 props 和 context。其中，props 是元件接收的屬性值，context 包含了一些元件的設定資訊。 1.是什麼：setup 是 Vue3 中新增的元件配置項，作為組合 API 的入口函數。
2.執行時機：實例建立前調用，甚至早於 Vue2 中的 beforeCreate。
return 進行回傳可在模版中直接使用
（一般情況下setup 不能為非同步函數）。2.2.setup()初步體驗
#App.vue<template>
<h1 @click="say()">{{ msg }}</h1>
</template>
<script>
export default {
setup() {
const msg = 'Hello Vue3'
const say = () => {
console.log(msg)
}
return { msg, say }
},
}
</script>效果檢視：#注意：酷似於vue2中的data()與methods都是需要寫在return才可作為結果呼叫。 【小小面試題補充】setup 中 return 的一定只能是一個物件嗎？ （setup 也可以回傳一個渲染函數）
App.vue
<script>
import { h } from 'vue'
export default {
name: 'App',
setup() {
return () => h('h2', 'Hello Vue3')
},
}
</script>控制台則是印出了h2標籤的Hello Vue3。 
2.3.reactive()函數
#使用 reactive 函數包裝陣列為響應式資料。 reactive 是一個函數，用來將普通物件/陣列包裝成響應式資料使用，無法直接處理基本資料類型（因為它是基於 Proxy 的，而 Proxy 只能代理的是物件）。
例如當我有需求：點擊刪除目前行資訊 App.vue
<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>透過vueTools查看，我點擊過後資料是被刪除了，但頁面上並沒有事實的渲染出來
此時，使用reactive()包裝數組使變成響應式資料,別忘了導入<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>
此刻頁面也就具有了響應式，點擊時刪除，頁面則是響應式的同理：我們用reactive()來包裹我們的物件來使用###<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'
export default {
name: 'App',
setup() {
const state = reactive({
arr: [
{
id: 0,
name: 'ifer',
},
{
id: 1,
name: 'elser',
},
{
id: 2,
name: 'xxx',
},
],
})
const removeItem = (index) => {
// 默认是递归监听的，对象里面任何一个数据的变化都是响应式的
state.arr.splice(index, 1)
}
const user = reactive({
id: '',
name: '',
})
const handleSubmit = () => {
state.arr.push({
id: user.id,
name: user.name,
})
user.id = ''
user.name = ''
}
return {
state,
removeItem,
user,
handleSubmit,
}
},
}
</script>## #############上述程式碼的解意：############我定義了輸入框，定義了刪除、新增事件的操作，透過v-model打到雙向綁定資料來完成對我的資料進行增加與刪除。 ### 到目前你是不是對setup()的使用有了更清晰的認知呢？下面再來簡化一下我們的寫法。 ###############2.3.1reactive()的進一步抽離#########最佳化：將相同功能的資料和業務邏輯抽離為函數，程式碼更易讀，更容易重複使用。 ###<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>将方法抽离出来，用类似于导入的方式进行一个抽离，将数据与方法放在一起，便于我们的统一管理。
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>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 }
}以上是淺析vue3中setup()和reactive()函數的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除