vue3組合式API中setup()概念和reactive()函數(shù)的用法
??本文核心：setup()概念、 reactive()的使用
【前言】vue3作為vue2的升級版，有著很多的新特性，其中就包括了組合式API，也就是是 Composition API。學習組合式API有什么優(yōu)點呢？之前的vue2中結構不是挺不錯的嗎？那么接下來的事件，我將帶著你從淺到深分析為什么我們需要學習組合式API以及我們的setup()函數(shù)作為入口函數(shù)的一個基本的使用方式。
?一、組合式API對比vue2項目結構
在vue2當中
- 1.優(yōu)點：易于學習和使用，寫代碼的位置已經約定好。
- 2.缺點：對于大型項目，不利于代碼的復用、不利于管理和維護。
- 3.解釋：同一功能的數(shù)據(jù)和業(yè)務邏輯分散在同一個文件的 N 個地方，隨著業(yè)務復雜度的上升，我們需要經常在類似于data()以及methods中進行來回的處理
在vue3當中
- 1.優(yōu)點：可以把同一功能的數(shù)據(jù)和業(yè)務邏輯組織到一起，方便復用和維護。
- 2.缺點：需要有良好的代碼組織和拆分能力，相對沒有 Vue2 容易上手。
- 3.解釋：注意：為了能讓大家較好的過渡到 Vue3.0 版本，目前也是支持 Vue2.x 選項 API 的寫法。
?二、setup()函數(shù)的使用
2.1setup()函數(shù)的基礎概念
Vue3 中的 setup() 是 Vue3 新增的組件配置項，用于替代 Vue2 中的 data()、methods()、computed() 等配置項。setup() 提供了更簡潔的編寫方式，且能夠更好地利用 Vue3 提供的 Composition API。setup() 函數(shù)接受兩個參數(shù)，分別是 props 和 context。其中，props 是組件接收的屬性值，context 包含了一些組件的配置信息。
- 1.是什么：setup 是 Vue3 中新增的組件配置項，作為組合 API 的入口函數(shù)。
- 2.執(zhí)行時機：實例創(chuàng)建前調用，甚至早于 Vue2 中的 beforeCreate。
- 3.注意點：由于執(zhí)行 setup 的時候實例還沒有 created，所以在 setup 中是不能直接使用 data 和 methods 中的數(shù)據(jù)的，所以 Vue3 setup 中的 this 也被綁定為了 undefined。
雖然 Vue2 中的 data 和 methods 配置項雖然在 Vue3 中也能使用，但不建議了，建議數(shù)據(jù)和方法都寫在 setup 函數(shù)中，并通過 return 進行返回可在模版中直接使用（一般情況下 setup 不能為異步函數(shù)）。
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 也可以返回一個渲染函數(shù)）
App.vue
<script>
import { h } from 'vue'
export default {
name: 'App',
setup() {
return () => h('h2', 'Hello Vue3')
},
}
</script>控制臺則是打印出了h2標簽的Hello Vue3。
2.3.reactive()函數(shù)
使用 reactive 函數(shù)包裝數(shù)組為響應式數(shù)據(jù)。reactive 是一個函數(shù)，用來將普通對象/數(shù)組包裝成響應式式數(shù)據(jù)使用，無法直接處理基本數(shù)據(jù)類型（因為它是基于 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查看，我點擊過后數(shù)據(jù)是被刪除了，但頁面上并沒有事實的渲染出來
此時，使用 reactive()包裝數(shù)組使變成響應式數(shù)據(jù),別忘了導入
<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) => {
// 默認是遞歸監(jiān)聽的，對象里面任何一個數(shù)據(jù)的變化都是響應式的
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打到雙向綁定數(shù)據(jù)來完成對我的數(shù)據(jù)進行增加與刪除。
到目前你是不是對setup()的使用有了更加清晰的認識呢？下面再來簡化一下我們的寫法。
2.3.1reactive()的進一步抽離
優(yōu)化：將同一功能的數(shù)據(jù)和業(yè)務邏輯抽離為一個函數(shù)，代碼更易讀，更容易復用。
<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>將方法抽離出來，用類似于導入的方式進行一個抽離，將數(shù)據(jù)與方法放在一起，便于我們的統(tǒng)一管理。
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組合式API中setup()概念和reactive()函數(shù)的用法的文章就介紹到這了,更多相關vue3 setup()與reactive()函數(shù)使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue解決使用$http獲取數(shù)據(jù)時報錯的問題
今天小編就為大家分享一篇vue解決使用$http獲取數(shù)據(jù)時報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
在我們開發(fā)項目中,特別是流程審批類的項目,最后一步會提交審核,審核員看完相應信息以后,沒問題就會簽字通過審批,這篇文章主要給大家介紹了關于VUE簽字組件vue-esign安裝使用的相關資料,需要的朋友可以參考下2023-09-09
本篇文章主要介紹關于vue-resource報錯450的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題
這篇文章主要介紹了vue中的事件觸發(fā)(emit)及監(jiān)聽(on)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue用ant design中table表格,點擊某行時觸發(fā)的事件操作
這篇文章主要介紹了vue用ant design中table表格,點擊某行時觸發(fā)的事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了Vue3.2?中新出的?Expose?是做啥用的,新的expose方法是非常直觀的，而且很容易在我們的組件中實現(xiàn)，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-07-07
Vue實現(xiàn)數(shù)據(jù)導出導入實戰(zhàn)案例
我們經常需要在Vue搭建的后臺管理系統(tǒng)里進行數(shù)據(jù)導入導出等操作,下面這篇文章主要給大家介紹了關于Vue實現(xiàn)數(shù)據(jù)導出導入實戰(zhàn)案例的相關資料,需要的朋友可以參考下2023-01-01
解決ElementUI組件中el-upload上傳圖片不顯示問題
這篇文章主要介紹了解決ElementUI組件中el-upload上傳圖片不顯示問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片滑動驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03