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