這篇文章帶大家聊聊vue3專案中組合式API基礎概念、setup()入口函數概念、 reactive()的使用方法，希望對大家有幫助！
1.優點：易於學習和使用，寫程式碼的位置已經約定好。
2.缺點：對於大型項目，不利於程式碼的重複使用、不利於管理和維護。
3.解釋：同一功能的資料和業務邏輯分散在同一個檔案的N 個地方，隨著業務複雜度的上升，我們需要經常在類似於data()以及methods中進行來回的處理
#1.優點：可以把相同功能的資料和業務邏輯組織在一起，方便多用和維護。
2.缺點：需要有良好的程式碼組織和分割能力，相對沒有 Vue2 容易上手。
3.解釋：注意：為了能讓大家較好的過渡到 Vue3.0 版本，目前也是支援 Vue2.x 選項 API 的寫法。
#2.1setup()函數的基礎概念
2.執行時機：實例建立前調用，甚至早於 Vue2 中的 beforeCreate。
return 進行回傳可在模版中直接使用
（一般情況下setup 不能為非同步函數）。
<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>
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查看，我點擊過後資料是被刪除了，但頁面上並沒有事實的渲染出來
<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><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><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>将方法抽离出来，用类似于导入的方式进行一个抽离，将数据与方法放在一起，便于我们的统一管理。
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中文網其他相關文章！
